本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下
<>强实现目标
<强>代码实现
集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。
& lt; !- wxml祝辞
& lt;视图类=八阉骺颉北?
& lt;视图类=巴急辍北?
& lt;图像src=" https://www.yisu.com/assets/search.png "模式=' widthFix祝辞& lt;/image>
& lt; !——使用bindinput属性绑定getSearchKey函数获取输入组件中的值——比;
& lt; !——使用bindblur属性绑定routeToSearchResPage函数处理输入失去焦点事件——比;
& lt;输入占位符='搜索你想购买的商品的bindinput=癵etSearchKey”bindblur=' routeToSearchResPage祝辞& lt;/input>
& lt;/view>
& lt; text>取消& lt;/text>
& lt;/view>
& lt;视图类='选项'比;
& lt; text>历史搜索记录& lt;/text>
& lt;文本bindtap=' clearHistory祝辞清空& lt;/text>
& lt;/view>
& lt;视图类='选项'比;
& lt; !——遍历历史数组——比;
& lt;文本类='物品'天气:为={{历史}}的材料指数={{指数}}的bindtap=皉outeToSearchResPage”在{{项}}& lt;/text>
& lt;/view>
样式表可无视
/* wxs */.search-box {
background - color: # 142341;
溢出:隐藏;
填充:3%;
}
.search-box .icon {
宽度:80%;
padding-left: 2%;
background - color: # fff;
浮:左;
border - radius: 1快速眼动;
}
{.search-box .icon形象
宽度:1快速眼动;
身高:1快速眼动;
显示:块;
利润:0.5雷姆0;
浮:左;
}
.search-box输入{
显示:块;
字体大小:0.8快速眼动;
高度:2快速眼动;
行高:2快速眼动;
浮:左;
margin-left: 5%;
}
{.search-box文本
宽度:18%;
浮:左;
颜色:# fff;
行高:2快速眼动;
text-align:中心;
字体大小:0.8快速眼动;
}
.options {
宽度:94%;
利润率:3%;
字体大小:0.8快速眼动;
颜色:# 999;
}
.options文本:胎{
颜色:# 1268 bb;
浮:正确;
}
.options .item {
填充:0.2雷姆0.5快速眼动;
background - color: # eee;
浮:左!重要;
颜色:# 565656 !重要;
border - radius: 0.1快速眼动;
利润率:3%;
}
JavaScript
//index.js
页面({
数据:{
searchKey:“”,
历史:[]
},//获取输入文本
getSearchKey:函数(e) {
this.setData ({
searchKey: e.detail.value
})
},//清空页对象数据的历史数组重置缓存为[]
clearHistory:函数(){
this.setData ({
历史:[]
})
wx。setStorageSync(“历史”,[])
},//输入失去焦点函数
routeToSearchResPage:函数(e) {//对历史记录的点击事件已忽略
让_this=;
让_searchKey=this.data.searchKey;
如果(! this.data.searchKey) {
返回
}
让历史=wx.getStorageSync(“历史”)| | [];
history.push (this.data.searchKey)
wx。setStorageSync(“历史”,历史);
},//每次显示钩子函数都去读一次本地存储
alt="微信小程序结合存储实现搜索历史效果">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
