微信小程序結合Storage實現(xiàn)搜索歷史效果
更新時間:2019年05月18日 11:45:36 作者:ruff1996
這篇文章主要為大家詳細介紹了微信小程序結合Storage實現(xiàn)搜索歷史效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)搜索歷史效果的具體代碼,供大家參考,具體內容如下
實現(xiàn)目標
代碼實現(xiàn)
集合wx.setStorageSync()和wx.getStorageSync()這兩個同步函數(shù)來實現(xià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失去焦點事件--> <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失去焦點函數(shù) routeToSearchResPage: function(e) { //對歷史記錄的點擊事件 已忽略 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ā)者工具調試的Storage可見。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法,涉及JavaScript基于函數(shù)的判定及調用previousSibling與nextSibling的相關技巧,需要的朋友可以參考下2016-01-01from表單多個按鈕提交用onclick跳轉不同action
這篇文章主要介紹了from表單多個按鈕提交用onclick跳轉不同action,需要的朋友可以參考下2014-04-04JavaScript中String.prototype用法實例
這篇文章主要介紹了JavaScript中String.prototype用法,實例分析了prototype的功能及使用技巧,需要的朋友可以參考下2015-05-05