使用WXS做搜索列表功能
使用WXS过滤功能做搜索列表功能
小程序搜索功能,通过关键字去搜索data里面的数组变量 list,如果根据输入框输入的文字实时搜索,频繁使用 this.setData 改变数据变量list ,这样多次调用 setData 去 改变原数据的方法,需要保存一份原数据和搜索数据,避免输入框文字框清空时,无法输出原数据,这种方法用到更多的变量,同时会降低小程序的体验度和增加性能消耗,而且额外保存一份原数据和搜索数据,处理起来也不方便。
在实践中,使用 wxs 的过滤功能可以更好的完成搜索功能需求。实现原理如下草图。
[图片]
示例代码:
https://developers.weixin.qq.com/s/qJhhxJma7fcY
<block wx:for="{{ list }}">
<block wx:if="{{ tools.search(index,inputVal) }}">
<navigator url="" class=“weui-cell” hover-class=“weui-cell_active”>
<view class=“weui-cell__bd”>
<view>索引{{index}}</view>
</view>
</navigator>
</block>
</block>
[图片]
[图片]