介绍
本示例介绍使用includes方法对数据实现模糊查询
效果图预览
使用说明
- 点击首页搜索框跳转到搜索页面
- 在搜索页面输入框中输入搜索的内容,下方列表自动根据搜索的内容进行筛选渲染
- 点击筛选后的列表跳转到相应的页面
- 跳转后会保存搜索历史,搜索历史使用持久化存储处理退出应用再次进入依旧存在
- 点击搜索历史可以跳转到相应页面
实现思路
1.通过include方法判读是否存在符合条件的数据。
searchFunc(value: string) {
let newListData: ListData[] = [];
if (this.searchListData !== undefined) {
for (let i = 0; i < this.searchListData.length; i++) {
// 通过includes对输入的字符进行查询
if (this.searchListData[i].name.toLowerCase().includes(value.toLowerCase())) {
newListData.push(this.searchListData[i])
}
}
}
this.listData = newListData
}
2.通过PersistentStorage进行持久化数据存储。
PersistentStorage.persistProp('searchHistoryData', [])
@StorageLink('searchHistoryData') searchHistoryData: ListData[] = []
ListItem() {
Column() {
Row() {
Image($r('app.media.search'))
.width($r('app.string.search_list_image_width'))
Text(item.name)
.fontSize($r('app.string.search_history_font_size2'))
.margin({ left: $r('app.string.search_history_text_padding_margin2') })
}
Divider()
.width('100%')
.height(1)
.margin({ top: $r('app.string.search_history_text_padding_margin1') })
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.margin({ top: $r('app.string.search_history_text_padding_margin1') })
.onClick(() => {
if (this.searchHistoryData.includes(item)) {
return;
}
// 更新搜索历史数据
this.searchHistoryData.push(item);
// 调用动态路由相关方法实现页面跳转
DynamicsRouter.push(item.routerInfo, item.param);
})
高性能知识点
不涉及
工程结构&模块类型
SearchComponent // har类型(默认使用har类型,如果使用hsp类型请说明原因)
|---model
| |---ListData.ets // 筛选数据模型
|---SearchComponent.ets // 搜索组件
|---SearchPage.ets // 搜索页面
模块依赖
不涉及
如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
《鸿蒙开发学习手册》:
如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……