您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在微信小程序中實(shí)現(xiàn)一個(gè)搜索歷史功能,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
首先,定義歷史記錄的顯示風(fēng)格和方式
<view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" id="{{item.id}}" bindtap="tapSercherStorage"> <text >{{item.name}}</text> </view> </view>
其次是“清除歷史記錄”按鈕,個(gè)人建議在沒(méi)有搜索歷史的時(shí)候不顯示按鈕,因?yàn)樵谙掠行?qiáng)迫癥
<view wx:if="{{sercherStorage.length!==0}}" 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(); }
上述就是小編為大家分享的怎么在微信小程序中實(shí)現(xiàn)一個(gè)搜索歷史功能了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。