微信小程序搜索輸入框帶搜索記錄
在最近的項(xiàng)目里有一個(gè)需求,就是需要一個(gè)帶搜索記錄的輸入框,但是不需要用到后臺(tái),就想到了使用本地緩存setStorageSync。
總結(jié)一下需要注意的點(diǎn):
1、按搜索時(shí)間倒序。
unshift:在數(shù)組前面插入數(shù)據(jù),并改變數(shù)組。
2、搜索內(nèi)容前后添加了空格的時(shí)候。
string.trim();//去掉前后空格
3、最多緩存多少條搜索記錄。
// 如果超過(guò)8條搜索記錄的話,刪掉最舊的一條
if (searchData.length >= 8)searchData.pop();
//pop:刪除數(shù)組最后一個(gè)元素。
4、輸入了搜索記錄已經(jīng)有了的內(nèi)容。
//先刪除搜索記錄里面的,再添加元素到第一位
// 如果搜索記錄里面有重復(fù)的,要做刪除操作
for (let i = 0; i < searchData.length; i++) {
if (searchData[i] == this.data.inputValue.trim()){
searchData.splice(i,1);
break;
}
}
// 添加搜索記錄
searchData.unshift(inputValue.trim());
只上傳了關(guān)鍵代碼,如有bug請(qǐng)查看修改一下,問(wèn)題應(yīng)該不大。
HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。