实现样式
在JS中设置初始值
data: {inputVal: '',searchRecord: []},
搜索历史
获取缓存openHistorySearch: function () {this.setData({searchRecord: wx.getStorageSync('searchRecord') || [], //若无储存则为空})},onLoad: function (opstion) {this.openHistorySearch();}
写入缓存
//搜索框文本内容显示inputBind: function (event) {this.setData({inputValue: event.detail.value})// console.log('输入' + this.data.inputValue)var app = getApp();//设置全局的请求访问传递的参数app.requestName = event.detail.value;},query: function (e) {var that = thisif (!that.data.inputValue) {//没有搜索词 友情提示wx.showToast({title: '请重新输入',duration: 2000,})}else {//提交表单跳转并储存历史记录wx.navigateTo({url: '/pages/search/search',})var that = thisvar inputVal = getApp().requestNamevar searchRecord = this.data.searchRecord//将搜索值放入历史记录中,只能放前五条if (searchRecord.length < 5) {searchRecord.unshift({value: inputVal,id: searchRecord.length})} else {searchRecord.pop() //删掉旧的时间最早的第一条searchRecord.unshift({value: inputVal,id: searchRecord.length})}}//将历史记录数组整体储存到缓存中wx.setStorageSync('searchRecord', searchRecord)}
清除缓存
historyDel: function () {wx.clearStorageSync('searhRecord')this.setData({searchRecord: []})}
html结构
<view class="container"><!-- 搜索框 --><view class="ss"><view class="ssl" bindtap="jiaodian"><image class="cha1" src="/images/fangdajing.png"></image><input class="ssk" value="{{inputVal}}" bindinput='inputBind' bindconfirm='query' confirm-type="search" maxlength="8" placeholder="输入律师名字"/><image src="/images/delete.png" catchtap='chaguan' hidden="{{hideo}}" class="cha"></image></view><text hidden="{{hideo}}" bindtap="quxiao">取消</text></view><view class="tj"><view class="tjlist"><view s-if="{{lvnull}}"><!-- 搜索结果的样式 --></view><view s-else class="tjnull">未查找到此律师</view></view></view></view><!-- 搜索历史 --><!-- 点击垃圾桶或“清除历史记录”可删除历史纪录和本地缓存 --><view hidden="{{hideo}}" class="yinv"><view class="lishi">搜索历史<image bindtap='historyDelFn' src="/images/delete2.png"></image></view><view class="lishimenu"><text class="lsbut" s-for="p ,index in searchRecord">{{p.value}}</text></view><view bindtap='historyDelFn'><view class="history_span">清除历史记录</view></view></view>
