本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。
使用说明
页面顶部搜索框内热搜词条自动切换,编辑搜索框时自动隐藏。
TextInput({ text: this.textData, controller: this.controller })
.onChange((data) => {
this.textData = data;
})
Swiper() {
// 循环搜索关键字数据
ForEach(FIND_SEARCH_TEXT_DATA, (item: SearchTextModel) => {
Text(item.searchText)
...
}, (item: SearchTextModel) => item.id.toString())
}
.onEditChange((isEditing) => {
if (!isEditing) {
this.isAutoPlay = true
} else {
this.isAutoPlay = false
}
})
欢迎大家关注公众号<程序猿百晓生>,可以了解到一下知识点。
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案)
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
Swiper() {
...
}
.visibility(this.textData ? Visibility.Hidden : Visibility.Visible)
Stack() {
Swiper()
TextInput()
}
searchswiper // har类型
|---SearchSwiper.ets // 视图层-场景列表页面
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。