业务描述
在小程序中我们查询数据量较大较多时候需要对查询条件进行限制从而筛选数据
这个时候我们就需要用一个搜索框的功能来实现搜索数据的功能
实现步骤
引入vant搜索框组件
在page.json页面引入组件
"usingComponents": {
"van-divider": "@vant/weapp/divider/index",
"van-toast": "@vant/weapp/toast/index",
"van-popup": "@vant/weapp/popup/index",
"van-button": "@vant/weapp/button/index",
"van-search": "@vant/weapp/search/index"
},
页面使用组件
在wxml页面中使用该搜索组件
<van-search
value="{{ serchvalue }}"
placeholder="请输入小区名关键字"
background="#E1B368 "
shape="round"
show-action
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
input-align="center"/>
效果图如下
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。