微信小程序显示用户搜索历史记录功能实现

效果是点击首页输入框跳转到搜索页面，用户搜索后将搜索的内容在历史搜索中展示 如下图所示

首页输入框布局和样式这里我就不展示了 js就是点击跳转页面

历史搜索记录模块wxml

代码语言：javascript复制

<view class="history">
    <!-- 历史搜索标题 -->
    <view class="his_head">
      <van-row>        
        <van-col span="20">          
          <view class="his_title">历史搜索</view>        
        </van-col>        
        <van-col span="4">          
          <view bindtap="hisDel">            
            <van-image class="his_icon" width="20rpx" height="21rpx" src="/images/search/icon.png" />            
            <view class="his_del">清空</view>          
          </view>        
        </van-col>      
      </van-row>    
    </view>    
    <!-- END -->
    <!-- 历史搜索内容 -->    
    <view class="hot_txt" wx:for="{{searchRecord}}" wx:key="hisTxt">{{item.value}}</view>
    <view wx:if="{{searchRecord.length == 0}}">你还没有搜索记录</view>
    <!-- END -->
  </view>

js

代码语言：javascript复制

data: {
  inputVal: '',
  searchRecord: []
},

//取得本地储存函数 在生命周期函数onload中调用
getHistorySearch: function() {
  this.setData({
    searchRecord: wx.getStorageSync('searchRecord') || [] //若无存储则为空
  })
},

//点击垃圾桶图标清空历史搜索记录
hisDel: function() {
  wx.clearStorageSync('searchRecord')
  this.setData({
    searchRecord: []
  })
},

//提交表单并存储搜索内容
onSearch: function(e) {
  var inputVal = e.detail;
  var searchRecord = this.data.searchRecord;

  if(inputVal == '') {
    //输入为空时的处理
    return false
  } else {
    //将输入值放入历史记录中，放前8条
    if(searchRecord.length < 8) {
      searchRecord.unshift({
        value: inputVal,
        id: searchRecord.length,
        url: ''
      })
    } else {
      searchRecord.pop() //删掉时间最早的一条
      searchRecord.unshift({
        value: inputVal,
        id: searchRecord.length,
        url: ''
      })
    }
    //将历史记录数组储存到本地缓存中
    wx.setStorageSync('searchRecord', searchRecord)
  }
}

布局 搜索

0 人点赞