下载Vant Weapp

步骤一：通过 npm 安装

npm i @vant/weapp -S --production

步骤二：修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三：修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

"setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
        {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./miniprogram/"
        }
    ]
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可。

步骤四：构建 npm 包

点击工具-->构建npm

并勾选本地设置-->使用npm模块选项

在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。

"usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-picker": "@vant/weapp/picker/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-button": "@vant/weapp/button/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-empty": "@vant/weapp/empty/index",
    "van-search": "@vant/weapp/search/index"
}

2. 列表页添加搜索功能

<!-- 导入wxs文件 -->
<wxs src="../../wxs/filter.wxs" module="filter" />
<view class="container">
  <van-search model:value="{{ title }}" placeholder="请输入搜索关键词" bind:search="onSearch"
  bind:clear="onClear" />
  <navigator url="../vantdetails/vantdetails?id={{item.Id}}" class="data" wx:for="{{dataList}}" wx:key="index">
    <view class="title">{{item.Title}}</view>
    <view class="flex j-s a-c desc">
      <view>{{item.Section.Name}}</view>
      <view>{{filter.formatTime(item.Createtime)}}</view>
    </view>
  </navigator>
</view>
<view bindtap="click" class="btn_add">+</view>

//搜索框的搜索方法
onSearch(){
    this.data.pageIndex = 1  //页码重新设置为1
    this.getDataList()  //调用获取数据的方法
},
//搜索框的清空方法
onClear(){
    //清空title
    this.setData({
        title:''
    })
    this.data.pageIndex = 1  //页码重新设置为1
    this.getDataList()  //调用获取数据的方法
}