收藏
评论

搜索类小程序添加历史记录功能



效果如上图,下面是关键代码:


1. 页面 onLoad 方法中读取缓存

  // 读取相缓存数据

  onLoad: function() {
    const searchRecord = wx.getStorageSync('searchRecord') || []
    this.setData({
      searchRecord: searchRecord
    })

 }


2. 搜索提交事件中,保存历史记录到缓存

 // 判断是否是搜索框提交事件
 if (that.data.fromSearch) {
           let searchRecord = that.data.searchRecord
           let keyword = that.data.keyword;
           // 如果记录已存在,直接返回
           for (let i = 0; i < searchRecord.length; i++) {
             if (keyword == searchRecord[i].value) return
           }
           if (searchRecord.length >= 8)
             searchRecord.pop() // 删除最早的一条记录
           searchRecord.unshift({
             value: that.data.keyword,
           })
           // 将历史记录添加到缓存中
           wx.setStorage({
             key: 'searchRecord',
             data: searchRecord,
             success: function(res) {
               that.setData({
                 searchRecord: searchRecord,
                 fromSearch: false
               })
             }
           })

 }

注意这里用的 wx.setStorage 异步调用,貌似使用 wx.setStorageSync 在线上版本会报错。


咕咕盘搜,是我的第一个小程序作品,大家可以体验一下。



最后一次编辑于  2018-11-26  (未经腾讯允许,不得转载)
赞 0
收藏