【代码案例】HarmonyOS 鸿蒙Next搜索功能实现案例

【代码案例】HarmonyOS 鸿蒙Next搜索功能实现案例
<markdown _ngcontent-pco-c237="" class="markdownPreContainer">

HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/searchcomponent

介绍

本示例介绍使用includes方法对数据实现模糊查询

效果图预览

使用说明

1. 点击首页搜索框跳转到搜索页面
2. 在搜索页面输入框中输入搜索的内容，下方列表自动根据搜索的内容进行筛选渲染
3. 点击筛选后的列表跳转到相应的页面
4. 跳转后会保存搜索历史，搜索历史退出应用已经存在不会销毁
5. 点击搜索历史可以跳转到相应页面

实现思路

1. 通过include方法判读是否存在符合条件的数据。源码参考SearchPage.ets

  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
  }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

2通过PersistentStorage进行持久化数据存储。源码参考SearchPage.ets

  PersistentStorage.persistProp('searchHistoryData', [])
  [@StorageLink](/user/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(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .height(<span class="hljs-number"><span class="hljs-number">1</span></span>)
    .margin({ <span class="hljs-attribute"><span class="hljs-attribute">top</span></span>: $r(<span class="hljs-string"><span class="hljs-string">'app.string.search_history_text_padding_margin1'</span></span>) })
}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.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);
// 调用动态路由相关方法实现页面跳转
buildRouterModel(item.path, item.routerName, item.param);
})
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

高性能知识点

不涉及

工程结构&模块类型

SearchComponent                                 // har类型(默认使用har类型，如果使用hsp类型请说明原因)
|---model
|   |---ListData.ets                            // 筛选数据模型
|---SearchComponent.ets                         // 搜索组件
|---SearchPage.ets                              // 搜索页面
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

模块依赖

不涉及

参考资料

search组件详细用法可参考性能范例

</markdown>

关于【代码案例】HarmonyOS 鸿蒙Next搜索功能实现案例的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。