小程序引入搜索框实现搜索功能

原创

用户6493868

发布于 2022-03-07 20:15:16

2.4K0

发布于 2022-03-07 20:15:16

文章被收录于专栏：vue封装H5vue封装H5

业务描述

在小程序中我们查询数据量较大较多时候需要对查询条件进行限制从而筛选数据

这个时候我们就需要用一个搜索框的功能来实现搜索数据的功能

实现步骤

引入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"/>

效果图如下