您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)搜索歷史效果的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)目標(biāo)
代碼實(shí)現(xiàn)
集合wx.setStorageSync()和wx.getStorageSync()這兩個同步函數(shù)來實(shí)現(xiàn)這個功能實(shí)際上非常簡單。
<!-- wxml --> <view class="search-box"> <view class='icon'> <image src='../../assets/search.png' mode='widthFix'></image> <!-- 使用bindinput屬性綁定getSearchKey函數(shù)獲取input組件中的值--> <!-- 使用bindblur屬性綁定routeToSearchResPage函數(shù)處理input失去焦點(diǎn)事件--> <input placeholder='搜索你想購買的商品' bindinput='getSearchKey' bindblur='routeToSearchResPage'></input> </view> <text>取消</text> </view> <view class='options'> <text>歷史搜索記錄</text> <text bindtap='clearHistory'>清空</text> </view> <view class='options'> <!-- 遍歷 history 數(shù)組 --> <text class='item' wx:for='{{history}}' data-index='{{index}}' bindtap='routeToSearchResPage'>{{item}}</text> </view>
樣式表 可無視
/* wxss */ .search-box { background-color: #142341; overflow: hidden; padding: 3%; } .search-box .icon { width: 80%; padding-left: 2%; background-color: #fff; float: left; border-radius: 1rem; } .search-box .icon image { width: 1rem; height: 1rem; display: block; margin: 0.5rem 0; float: left; } .search-box input { display: block; font-size: 0.8rem; height: 2rem; line-height: 2rem; float: left; margin-left: 5%; } .search-box text { width: 18%; float: left; color: #fff; line-height: 2rem; text-align: center; font-size: 0.8rem; } .options { width: 94%; margin: 3%; font-size: 0.8rem; color: #999; } .options text:last-child { color: #1268bb; float: right; } .options .item { padding: 0.2rem 0.5rem; background-color: #eee; float: left !important; color: #565656 !important; border-radius: 0.1rem; margin: 3%; }
JavaScript
//index.js Page({ data: { searchKey: "", history: [] }, //獲取input文本 getSearchKey: function(e) { this.setData({ searchKey: e.detail.value }) }, // 清空page對象data的history數(shù)組 重置緩存為[] clearHistory: function() { this.setData({ history: [] }) wx.setStorageSync("history", []) }, // input失去焦點(diǎn)函數(shù) routeToSearchResPage: function(e) { //對歷史記錄的點(diǎn)擊事件 已忽略 let _this = this; let _searchKey = this.data.searchKey; if (!this.data.searchKey) { return } let history = wx.getStorageSync("history") || []; history.push(this.data.searchKey) wx.setStorageSync("history", history); }, //每次顯示鉤子函數(shù)都去讀一次本地storage onShow: function() { this.setData({ history: wx.getStorageSync("history") || [] }) } })
本地存儲可在微信開發(fā)者工具調(diào)試的Storage可見。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。