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

介绍

本示例介绍使用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                          // 视图层-场景列表页面

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://gitee.com/MNxiaona/733GH/blob/master/jianshu