鸿蒙开发实战案例：搜索框热搜词自动滚动

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

---

介绍

本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。

效果图预览

使用说明

页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。

实现思路

1. 使用TextInput实现搜索框

   TextInput({ text: this.textData, controller: this.controller })
   .onChange((data) => {
      this.textData = data;
   })

2. 使用Swiper实现热搜词条切换,其中使用ForEach组件循环热搜内容

    Swiper() {
     // 循环搜索关键字数据
      ForEach(FIND_SEARCH_TEXT_DATA, (item: SearchTextModel) => {
        Text(item.searchText)
        ... 
       }, (item: SearchTextModel) => item.id.toString())
    }

3. 通过判断搜索框编辑态来控制Swiper组件滚动的开始和暂停

   .onEditChange((isEditing) => {
     if (!isEditing) {
       this.isAutoPlay = true
     } else {
       this.isAutoPlay = false
     }
   })

4. 通过判断搜索框是否有内容控制Swiper组件显示隐藏

   Swiper() {
     ...
   }
   .visibility(this.textData ? Visibility.Hidden : Visibility.Visible)

5. 使用Stack组件堆叠搜索框与热搜词

   Stack() {
     Swiper()
     TextInput()
   }

工程结构&模块类型

   searchswiper                                  // har类型
   |---SearchSwiper.ets                          // 视图层-场景列表页面