微信小程序?qū)崿F(xiàn)搜索歷史功能
更新時(shí)間：2020年03月26日 16:20:31 作者：余峰丶
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索歷史功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
結(jié)合了微信給的資料，馬馬虎虎摸索出了一些東西，下面說(shuō)一下微信小程里序搜索歷史功能的實(shí)現(xiàn)，下圖是實(shí)現(xiàn)效果。
首先，定義歷史記錄的顯示風(fēng)格和方式，在下用的是列表模式，沒(méi)有使用什么比較酷炫的套路。
<view wx:for="{{sercherStorage}}" wx:key="item.id">
<view class="liclass" style="color:#9E9E9E;border-bottom:0;font-size:26rpx;" id="{{item.id}}" bindtap="tapSercherStorage">
<text style="width:100rpx">{{item.name}}</text>
</view>
</view>
其次是“清除歷史記錄”按鈕，個(gè)人建議在沒(méi)有搜索歷史的時(shí)候不顯示按鈕，因?yàn)樵谙掠行?qiáng)迫癥
<view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
<view class="history-span">清除歷史記錄</view>
</view>
（微信小程序的數(shù)據(jù)交互還是蠻喜歡的）
這里是列表的CSS樣式
/*搜索歷史列表外部容器樣式*/
.ddclass {
position: absolute;
width: 100%;
margin-top: 10px;
left: 0;
}
/*搜索歷史普通樣式*/
.liclass {
font-size: 14px;
line-height: 34px;
color: #575757;
height: 34px;
display: block;
padding-left: 18px;
background-color: #fff;
border-bottom: 1px solid #dbdbdb;
}
最后是一些JS控制
1、參數(shù)聲明
data: {
sercherStorage: [],
StorageFlag: false //顯示搜索記錄標(biāo)志位
}
2、兩個(gè)主要的JS方法
//清除緩存歷史
clearSearchStorage: function () {
wx.removeStorageSync('searchData')
this.setData({
sercherStorage: [],
StorageFlag: false,
})
},
//打開(kāi)歷史記錄列表
openLocationsercher: function () {
this.setData({
sercherStorage: wx.getStorageSync('searchData') || [],
StorageFlag: true,
listFlag: true,
})
}
3、點(diǎn)擊搜索添加搜索內(nèi)容進(jìn)歷史記錄
var self = this;
if(self.data.search.length == 0){
return;
}
//控制搜索歷史
var self = this;
if (this.data.search != '') {
//將搜索記錄更新到緩存
var searchData = self.data.sercherStorage;
searchData.push({
id: searchData.length,
name: self.data.search
})
wx.setStorageSync('searchData', searchData);
self.setData({ StorageFlag: false, })
}
4、在進(jìn)入搜索頁(yè)面時(shí)，檢索出緩存中的搜索歷史。（適用于搜索頁(yè)面是單獨(dú)頁(yè)面的業(yè)務(wù)）
onLoad: function (options) {
this.openLocationsercher();
}
5、清空歷史記錄，只需在上面聲明搜索按鈕時(shí)把”bindtap”屬性值設(shè)置成寫(xiě)好的JS方法名即可。
更多搜索功能實(shí)現(xiàn)的精彩文章，請(qǐng)點(diǎn)擊專題：javascript搜索功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了webpack搭建腳手架打包TypeScript代碼，文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JavaScript取得WEB安全顏色列表的方法,分析了web安全顏色的定義及javascript獲取web安全顏色的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
js中文逗號(hào)轉(zhuǎn)英文實(shí)現(xiàn)
中文逗號(hào)如何轉(zhuǎn)英文，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)2014-02-02
今天小編就為大家分享一篇關(guān)于js中null與空字符串""的區(qū)別講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
addEventListener是JavaScript中的一個(gè)方法,用于向一個(gè)元素添加事件監(jiān)聽(tīng)器,本文給大家介紹JS中addEventListener的使用示例代碼,感興趣的朋友跟隨小編一起看看吧2023-10-10
用javascript getComputedStyle獲取和設(shè)置style的原理
這兩天用了baidu 百度空間中的彈出窗口js，感覺(jué)不錯(cuò)，很強(qiáng)大，很好很簡(jiǎn)單的解決了好幾個(gè)問(wèn)題，界面友好度以及美化也好多了，以前都是硬邦邦window.open();2008-10-10
之前提到了JS中比較簡(jiǎn)單的設(shè)計(jì)模式，在各種設(shè)計(jì)模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談?wù)凧S中比較簡(jiǎn)單的繼承方法2016-01-01
文件指紋是文件打包后輸出的文件名的后綴，通常用來(lái)做一些文件的版本管理，文中給大家提到了幾種文件指紋的設(shè)置用法，對(duì)Webpack文件指紋相關(guān)知識(shí)感興趣的朋友一起看看吧2022-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07