联系我们

微信小程序实现列表搜索功能

2017-11-22 10:44:22      点击:

最近在做小程序项目时候,需求页面需要实现列表搜索的功能,写了一个简单的demo

1、wxml代码:

//搜索框

<input type='text' confirm-type='search' bindinput='input1' bindconfirm='confirm1' style='border:1px solid #f00'/>

<view wx:for="{{hosList}}" wx:for-item="h">

<text wx:if="{{h.show}}">{{h.name}}</text>

</view>

2、js代码:

微信小程序搜索代码

小程序搜索代码

在页面中,就能实现搜索的功能了

小程序搜索展现