时间:2021-05-18
本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下
实现目标
代码实现
集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。
<!-- 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>样式表 可无视
.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.jsPage({ 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可见。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
结合了微信给的资料,马马虎虎摸索出了一些东西,下面说一下微信小程里序搜索历史功能的实现,下图是实现效果。首先,定义历史记录的显示风格和方式,在下用的是列表模式,
vue实现搜索显示历史搜索记录,采用插件-good-storage安装插件npminstallgood-storage-S在本地新建cache.js文件,该文件
【微信小程序如何制作】微信小程序如何渲染html格式的内容?如何制作微信小程序的历史组单选?下面就和小编一起来看看吧! 微信小程序如何渲染html格式的内
本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索,供大家参考,具体内容如下以下为效果图,使用的是腾讯地图位置服务微信小程序JavaScriptSDK
wxSearch优雅的微信小程序搜索框一、功能支持自定义热门key支持搜索历史支持搜索建议支持搜索历史(记录)缓存二、使用1、将wxSearch文件夹整个拷贝到