本文实例为大家分享了微信小程序实现搜索历史效果的具体代码，供大家参考，具体内容如下

实现目标

代码实现

集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。

！-wxml-view class=' search-box ' view class=' icon ' image src='././资产/搜索。png ' mode=' width fix '/image！-使用bindinput属性绑定getsearchekey函数获取投入组件中的值- !-使用bindblur属性绑定routeToSearchResPage函数处理投入失去焦点事件-输入占位符='搜索你想购买的商品绑定输入=' getsearchekey '绑定模糊=' routesearchrespage '/输入/查看文本取消/text/viewview class='options '文本历史搜索记录/text text bindtap='clearHistory '清空/text/viewview class='options '！-遍历历史数组-text class=' item ' wx : for=' { { history } } ' data-index=' { { index } } ' bind tap=' Routetosearchrespage ' { item } }/text/view样式表可无视

/* wxss */.搜索框{背景色： # 142341;飞越：隐藏；划水： 3%;}.搜索框。图标{宽度： 80%；左填充： 2%;背景-color : # fff；向左浮动：边界半径： 1雷姆；}.搜索框。图标图像{ width : 1 remheight : 1 remdisplay :块；余量： 0.5雷姆0;向左浮动：}.搜索框输入{显示：块；font-size : 0.8 rem高度： 2毫米线高： 2雷姆；向左浮动：保证金-左侧： 5%;}.搜索框文本{宽度：18%；向左浮动：color: # fff线高： 2雷姆；文本对齐：中心；font-size : 0.8 rem}.选项{宽度： 94%；保证金： 3%;font-size : 0.8 remcolor: # 999}。选项文本：最后一个孩子{ color : # 1268 bb向右浮动：}.选项。项目{ padding: 0.2rem 0.5rem背景色： # eee向左浮动：重要；color: #565656！重要；边界半径：0.1 em；保证金： 3%;}JavaScript

//索引。js page({ data : { search key : ' '，history: [] }，//获取投入文本getSearchKey:函数{这个。setdata({ search key : e . detail。value })}，//清空页对象数据的历史数组重置缓存为[]清除历史：函数(){这个。setdata({ history :[]})wx。setstorageync(' history '，[]) }，//input失去焦点函数路由搜索响应：函数(e) { //对历史记录的点击事件已忽略让这=这；let _ search key=this。数据。搜索关键字；if(！this.data.searchKey) { return }让历史=wx。getstorage ync(' history ')| |[]；历史。推(这个。数据。搜索关键字)wx。setstoragesync(' history '，history)；}, //每次显示钩子函数都去读一次本地存储在线：函数(){这个。setdata({ history : wx。getstorageync(' history ')| |[]})})本地存储可在微信开发者工具调试的仓库可见。

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