业务描述
在小程序中我们查询数据量较大较多时候需要对查询条件进行限制从而筛选数据
这个时候我们就需要用一个搜索框的功能来实现搜索数据的功能
实现步骤
引入vant搜索框组件
在page.json页面引入组件
代码语言：javascript复制"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页面中使用该搜索组件
代码语言：javascript复制<van-search
value="{{ serchvalue }}"
placeholder="请输入小区名关键字"
background="#E1B368 "
shape="round"
show-action
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
input-align="center"/>效果图如下
