往期鸿蒙全套实战文章必看:
介绍
本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。
效果图预览
使用说明
页面顶部搜索框内热搜词条自动切换,编辑搜索框时自动隐藏。
实现思路
- 使用TextInput实现搜索框
TextInput({ text: this.textData, controller: this.controller }) .onChange((data) => { this.textData = data; }
- 使用Swiper实现热搜词条切换,其中使用ForEach组件循环热搜内容
Swiper() { // 循环搜索关键字数据 ForEach(FIND_SEARCH_TEXT_DATA, (item: SearchTextModel) => { Text(item.searchText) ... }, (item: SearchTextModel) => item.id.toString()) }
- 通过判断搜索框编辑态来控制Swiper组件滚动的开始和暂停
.onEditChange((isEditing) => { if (!isEditing) { this.isAutoPlay = true } else { this.isAutoPlay = false } })
- 通过判断搜索框是否有内容控制Swiper组件显示隐藏
Swiper() { ... } .visibility(this.textData ? Visibility.Hidden : Visibility.Visible)
- 使用Stack组件堆叠搜索框与热搜词
Stack() { Swiper() TextInput() }
工程结构&模块类型
searchswiper // har类型 |---SearchSwiper.ets // 视图层-场景列表页面