uniapp对输入框搜索历史的去重与翻转处理

最新推荐文章于 2024-07-17 18:17:15 发布

寄相思予代码

最新推荐文章于 2024-07-17 18:17:15 发布

阅读量275

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_72503508/article/details/129652788

版权

本文介绍了如何在 uni-app 中处理输入框的搜索历史，包括存储历史数据、去重、翻转历史记录，以及在页面加载时从本地数据初始化，并提供了清除历史和完整代码示例。

摘要由CSDN通过智能技术生成

1. data中新建一个数据用来存储搜索历史

  data() {
      return {
        historyList: [], // 存储搜索历史的数据
        kw: '', // 存储输入框的值
      };
    },

2. 在输入框输入内容调用接口获取数据之后把输入的内容存到 historyList

 async getSearchList(){
        // 判断输入框是否为空
        if(!this.kw){
          return this.searchResults = []
        }
        
        const {message:res} = await api.getData("/goods/qsearch", {query: this.kw})
        // console.log(res)
        this.searchResults = res
        
        this.saveSearchHistory() // 存储历史记录的方法
      },
saveSearchHistory(){
        // 创建 set 实例 
        const set = new Set(this.historyList)
        
        // 调用 set 的 delete 删除方法 和 add 添加方法
        // 先删除输入的内容  然后在末尾添加
        set.delete(this.kw)
        set.add(this.kw)

        // 将 set 转换为 数组形式 进行储存
        this.historyList = Array.from(set)
        // console.log(set)
        // 顺便进行本地持久化的存储
        uni.setStorageSync(&