微信小程序实现搜索历史功能

结合微信给出的信息，我们摸索出了一些马马虎虎的东西。先说微信短训班历史搜索功能的实现，下图是实现效果。

首先，定义历史记录的显示风格和模式，用列表模式代替任何酷炫的套路。

view wx : for=' { { SercherStorage } } ' wx : key=' item . id ' view class=' liclass ' style=' color : # 9e9e 9 e；边框-底部：0；' font-size :26 rpx；'Id=' {{item。id } } ' bind tap=' tapserhistory ' text style=' width :100 rpx ' { item。名称} }/文本/视图/视图后面是“清除历史记录”按钮。个人建议没有搜索历史的时候不要显示按钮，因为有一些强迫症。

查看wx : if=' { { SercherStorage . length！==0 } } ' style=' text-align : center；'bind tap=' clearsearchtstorage ' view class=' history-span ' clear history/view/view(微信小程序的数据交互挺喜欢的)

这是列表的CSS样式

/*搜索历史列表外部容器样式*/。ddclass {position :绝对值；宽度： 100%；margin-top : 10px；left : 0；}/*搜索历史常用样式*/。Li class { font-size : 14px；线高： 34px；color: # 575757height: 34pxdisplay:块；左填充left: 18px背景-color : # fff；border-bottom: 1px实心# dbdbdbdb；}最后，还有一些JS控件

1.参数声明

Data: {sercherstorage3360 []，storageflag : false//显示搜索记录标志位}2。两种主要的JS方法

//清除缓存历史clearsearchtstorage 3360 function(){ wx . removestoragesync(' searchdata ')this . set data({ sercherstoragee 3360[]，storageflag: false，})}，//打开历史列表openlocationsercher 3360 function(){ this . set data({ sercherstoragee 3360 wx . getstoragesync(' searchdata ')|[]，storageflag3360true，listflag:true，})3)。单击搜索将搜索内容添加到历史记录中。

var self=这个；if(self . data . search . length==0){ return；}//控制搜索历史var self=thisif (this.data.search！=' '){//将搜索记录更新到缓存varsearchdata=self . data . sercher storage；search data . push({ id : search data . length，name : self . data . search })wx . setstoragesync(' search data '，search data)；自我。setdata ({storageflag: false，})4。进入搜索页面时，在缓存中检索搜索历史。(适用于搜索页面为单独页面的业务)

onLoad:函数(选项){ this . openlocationsercher()；}5.清除历史记录，只需在声明上面的搜索按钮时，将“bindtap”属性值设置为编写的JS方法名称。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。