关于历史搜索
1
2
3
4
5
6
7
8
9
10
11
12
13
| <input type="text" class="search-icon" placeholder="请输入要搜索的内容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>
<view>
<view>
<text style="float:left;" bindtap="deleteHistory">历史搜索</text>
<text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
</view>
<view>
<view class="search-list" wx:for="{{searchData}}" wx:key="item">
<view>{{item == null?'暂无数据':item}}</view>
</view>
</view>
</view>
|
这里有三个绑定事件
1
2
3
4
5
| bindinput=”searchNameInput” 获取用户输入的数据
bindtap=”setSearchStorage” 设置本地存储
bindtap=”deleteHistory” 删除历史搜索
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| // 获取用户输入框的值
searchNameInput:function(e){
var that = this;
that.setData({
inputValue:e.detail.value
})
}
// e.detail.value 即当前输入值
当点击搜索的时候，bindtap=”setSearchStorage”
// 将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
var that = this
if(this.data.inputValue != ''){
// 调用API向本地缓存存入数据
var searchData = wx.getStorageSync('searchData') || []
searchData.push(this.data.inputValue)
wx.setStorageSync('searchData', searchData)
// 读取用户搜索商品
var name = this.data.inputValue
wx.request({
url: 'www.shop.com/home/product/search',
data: {name:name},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}
}
|
流程这么走：
1.用户输入数据，点击搜索
2.如果数据不为空，加入（设置）本地缓存
3.去服务器搜索用户想要的数据，赋值给这个页面的变量
4.点击删除，去除本地这个key的value
这里的缓存形式的 key=>value
var searchData = wx.getStorageSync(‘searchData’) || []
获取本地名字为’searchData’的缓存，如果’searchData’这个缓存不存在就相当于重新什么一个空数组，赋值给searchData这个变量
searchData.push(this.data.inputValue)
将用户输入的值PUSH进searchData这个变量里
wx.setStorageSync(‘searchData’, searchData)
调用API接口，重新设置key = ‘searchData’的这个缓存的value等于searchData
下面的wx.request是请求数据的内容，说腻了，印象够深了。
这里没有绑定获取缓存的bindtap，只要获取到，然后添加到Page里面的data
这里是将’searchData’这个key的缓存的value为空数组，而不是使用API提供的wx.clearStorageSync，这个会清除其他的所有缓存，而我只是想清除这一个key的缓存
