介绍 & lt; view 天气:为=皗{sercherStorage}},,天气:关键=癷tem.id"比;
,& lt; view 类=發iclass",, id=皗{item.id}}“, bindtap=皌apSercherStorage"比;
,& lt; text 在{{item.name}} & lt;/text>
,& lt;/view>
& lt;/view> & lt; view 天气:如果=皗{sercherStorage.length !==0}},,, bindtap=癱learSearchStorage"比;
,& lt; view 类=癶istory-span"在清除历史记录& lt;/view>
& lt;/view> /*搜索历史列表外部容器样式*/.ddclass {大敌;
,位置:绝对的,,
,宽度:100%,,
,margin-top: 10 px;,
,左:,0;
},/*搜索历史普通样式*/.liclass {大敌;
,字体大小:14 px,,
,行高:34 px;,
,颜色:# 575757;,
,高度:34 px;,
,显示:块,,
,padding-left: 18 px;,
,背景颜色:# fff;,
,边界底部:1 px solid # dbdbdb;,
} ,数据:,{
,sercherStorage: [],
,StorageFlag: false //显示搜索记录标志位
以前,} //清除缓存历史
,clearSearchStorage: function (), {
,wx.removeStorageSync (& # 39; searchData& # 39;)
,this.setData ({
,sercherStorage: [],
,StorageFlag:假的,
,})
},
,//打开历史记录列表
,openLocationsercher: function (), {
,this.setData ({
,sercherStorage: wx.getStorageSync (& # 39; searchData& # 39;), | |, [],,
,StorageFlag:没错,
,listFlag:没错,
,})
以前,} var self =,;
如果(self.data.search.length ==, 0) {
,返回;
}//控制搜索历史
var self =,;
if (this.data.search !=, & # 39; & # 39;), {
,//将搜索记录更新到缓存
,var searchData =, self.data.sercherStorage;
,searchData.push ({
id:大敌;searchData.length,
,名字:self.data.search
,})
,wx.setStorageSync (& # 39; searchData& # 39;,, searchData);
,self.setData ({, StorageFlag:假的,,})
} onLoad:, function (选项),{
,this.openLocationsercher ();
,}
这期内容当中小编将会给大家带来有关怎么在微信小程序中实现一个搜索历史功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
首先,定义历史记录的显示风格和方式
其次是“清除历史记录”按钮,个人建议在没有搜索历史的时候不显示按钮,因为在下有些强迫症
(微信小程序的数据交互还是蛮喜欢的)
这里是列表的CSS样式
最后是一些JS控制
1,参数声明
2,两个主要的JS方法
3点击搜索添加搜索内容进历史记录
4,在进入搜索页面时,检索出缓存中的搜索历史。(适用于搜索页面是单独页面的业务)
上述就是小编为大家分享的怎么在微信小程序中实现一个搜索历史功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
