本文主要是介绍微信小程序结合Storage实现搜索历史效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
实现目标
![](/upload/202107/29/202107291105527021.png)
代码实现
集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- wxml --> < view class = "search-box" > < view class = 'icon' > < image src = '../../assets/search.png' mode = 'widthFix' ></ image > <!-- 使用bindinput属性绑定getSearchKey函数获取input组件中的值--> <!-- 使用bindblur属性绑定routeToSearchResPage函数处理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 数组 --> < text class = 'item' wx:for = '{{history}}' data-index = '{{index}}' bindtap = 'routeToSearchResPage' >{{item}}</ text > </ view > |
样式表 可无视
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | /* 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: 1 rem; } .search-box . icon image { width : 1 rem; height : 1 rem; display : block ; margin : 0.5 rem 0 ; float : left ; } .search-box input { display : block ; font-size : 0.8 rem; height : 2 rem; line-height : 2 rem; float : left ; margin-left : 5% ; } .search-box text { width : 18% ; float : left ; color : #fff ; line-height : 2 rem; text-align : center ; font-size : 0.8 rem; } .options { width : 94% ; margin : 3% ; font-size : 0.8 rem; color : #999 ; } .options text:last-child { color : #1268bb ; float : right ; } .options .item { padding : 0.2 rem 0.5 rem; background-color : #eee ; float : left !important ; color : #565656 !important ; border-radius: 0.1 rem; margin : 3% ; } |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | //index.js Page({ data: { searchKey: "" , history: [] }, //获取input文本 getSearchKey: function (e) { this .setData({ searchKey: e.detail.value }) }, // 清空page对象data的history数组 重置缓存为[] clearHistory: function () { this .setData({ history: [] }) wx.setStorageSync( "history" , []) }, // input失去焦点函数 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); }, //每次显示钩子函数都去读一次本地storage onShow: function () { this .setData({ history: wx.getStorageSync( "history" ) || [] }) } }) |
本地存储可在微信开发者工具调试的Storage可见。
![](/upload/202107/29/202107291105540846.png)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
这篇关于微信小程序结合Storage实现搜索历史效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!