uniapp项目搜索框的最近/热门搜索

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

上一篇文章中我们介绍了一下搜索框的输入内容渲染到最近搜索上以及暂无搜索记录的判断，接下来我们将实现搜索内容的展示与数组的追加方法。上一篇文章的搜索记录的判断的代码如下图所示：

• 在向searchData数组中添加数据的时候，需要注意如果用户之前搜索了A，然后再搜索B，最后再搜索A则A需要展示到B的前面，而不是B在A的前面，这个细节的实现需要使用到数组的unshift方法，搜索完成之后搜索记录需要保存到本地，所以需要调用一下uni.setStorage方法，这个api的官方文档在：uniapp.dcloud.net.cn/api/storage… ，所以追加搜索记录的addSearch方法的具体代码如下所示：

addSearch() {
      let idx = this.searchData.indexOf(this.searchword);
      if (idx < 0) {
        this.searchData.unshift(this.searchword);
      } else {
        this.searchData.unshift(this.searchData.splice(idx, 1)[0]);
      }
      uni.setStorage({
        key: "searchData",
        data: JSON.stringify(this.searchData),
      });
    },

• 接下来有一个热门搜索的板块，这个就没有必要做的很复杂，具体的代码如下所示：

<view class="search-item">
      <view class="search-title">
        <view>热门搜索</view>
      </view>

      <view class="hotsearch">
        <view class="search-name">南昌</view>
        <view class="search-name">四川</view>
      </view>
    </view>

• 然后本地存储这个api的执行需要我们一进入页面就展示出之前搜索过的数据，所以我们需要在onLoad里面执行以下uni.getStorage，用来获取到我们之前搜索过的记录，然后展示到页面上，这个数据的存储其实是存储在本地的浏览器上，我们打开控制台就可以看到。