微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)搜索歷史效果的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)目標(biāo)
代碼實(shí)現(xiàn)
集合wx.setStorageSync()和wx.getStorageSync()這兩個(gè)同步函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能實(shí)際上非常簡(jiǎn)單。
<!-- 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='搜索你想購(gòu)買(mǎi)的商品' 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>
樣式表 可無(wú)視
/* 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對(duì)象data的history數(shù)組 重置緩存為[] clearHistory: function() { this.setData({ history: [] }) wx.setStorageSync("history", []) }, // input失去焦點(diǎn)函數(shù) routeToSearchResPage: function(e) { //對(duì)歷史記錄的點(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") || [] }) } })
本地存儲(chǔ)可在微信開(kāi)發(fā)者工具調(diào)試的Storage可見(jiàn)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)瀑布流布局
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)瀑布流布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法,涉及JavaScript基于函數(shù)的判定及調(diào)用previousSibling與nextSibling的相關(guān)技巧,需要的朋友可以參考下2016-01-01手機(jī)軟鍵盤(pán)彈出時(shí)影響布局的解決方法
這篇文章主要介紹了手機(jī)軟鍵盤(pán)彈出時(shí)影響布局的解決方法的相關(guān)資料,大家開(kāi)發(fā)移動(dòng)端的軟件時(shí)候,肯定會(huì)因?yàn)檐涙I盤(pán)的彈窗影響布局,這里說(shuō)下如何解決,需要的朋友可以參考下2016-12-12from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action
這篇文章主要介紹了from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action,需要的朋友可以參考下2014-04-04JavaScript中String.prototype用法實(shí)例
這篇文章主要介紹了JavaScript中String.prototype用法,實(shí)例分析了prototype的功能及使用技巧,需要的朋友可以參考下2015-05-05