持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

1.使用Vant Weapp引入搜索框

• 进入Vant Weapp官网youzan.github.io/vant-weapp/…

• 找到搜索框

• 在app.json文件中的usingComponents代码块中复制粘贴以下代码

"van-search": "path/to/vant-weapp/dist/search/index"

• 使用基础用法，复制粘贴以下代码到index.wxml中

• 下面还有许多参数可供我们修改搜索框的样式 至此，搜索框就引入成功了。

给搜索框绑定页面跳转事件

• 绑定toSeach

• 在index.js中，创建toSearch函数

• 在app.json中，创建search页面

• 再在search页面引入搜索框

搜索功能的实现

• 首先我们需要获取商品数据

• 然后是搜索功能的js代码，这里采用的是模糊搜索，搜索的是商品的名称

代码里面详细的改动需要按照每个人数据库中商品的属性名称来修改。 其中search_list2是用来存储搜索到的商品的内容，若有该商品，则将res.data中的数据传给search_list2, esle{}中的代码是当搜索框清空的时候，下面商品的内容也清空。

• 接下来是将商品内容渲染到搜索页面上

search.wxml代码

效果展示

上面的模糊搜索可以让用户在边打字的时候边搜索，提高用户的体验感。