效果是点击首页输入框跳转到搜索页面，用户搜索后将搜索的内容在历史搜索中展示如下图所示
首页输入框布局和样式这里我就不展示了 js就是点击跳转页面
历史搜索记录模块wxml
<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
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)}}
