微信小程序搜索框实现怎么做?如何实现小程序搜索框?

时间：2023-07-01 14:05 阅读数：7人阅读

　　微信小程序搜索框实现怎么做?如何实现小程序搜索框?微信小程序搜索框实现了后，微信用户在微信小程序搜索内容会更加的方便哦，以下是小编整理多的微信小程序搜索框实现的代码哦，希望对大家有用哦。

　　微信小程序搜索框实现怎么做?

　　微信小程序搜索框实现的效果如下图所示：

　　下面主要讲下微信小程序搜索框实现怎么做的逻辑，其实也非常简单。

　　搜索input绑定bindInput函数。

　　将输入的值存在inputValue中，搜索button 用bindtap绑定setSearchStorage函数。

　　这个函数主要就是先判断输入的值是否不为空，再通过getStorageSync获取到key为searchData的localStorage，

　　如果第一次还没有set过这个key就获取[]，再将用户inputValue存的想要搜索的值放进searchData，之后再跳转到result页面。这里我只放了个案例页面。

　　如果在真正的生产环境中，这个函数可以通过wx.request向服务器发送请求，再把数据放进result页面中，实现真正的搜索功能。

　　删除inputValue的button功能实现也很简单，setData将inputValue设置为空字符串就可以了。

　　放点击result页面左上角的返回时，你就可以发现，你刚才搜索的结果已经放到了search的页面中。

　　当你想要删除缓存数据的时候，可以点击清空浏览记录按钮，会弹出个对话框：

　　点击确认删除之后，会自动刷新页面(重定向到本页面)，将之前的key为searchData的localStorage重置为空数组。

　　微信小程序搜索框实现的步骤就是这样了。

　　以上是小编整理的微信小程序搜索框怎么实现所需要的代码了哦，您如果要开发微信小程序搜索框，可以参考以上小编整理的内容哦，大家请多多关注微微风。更多微信素材尽在微微风。