3.5

首先在json文件中配置相应的组件

"navigationBarTitleText": "搜索",

"onReachBottomDistance": 0,

"usingComponents": { "van-search": "@vant/weapp/search/index", "ListItem":"/components/ListItem/ListItem" }

在search.wxml中
<van-search

value="{{ value }}" placeholder="请输入搜索关键词" show-action input-align="center" bind:search="onSearch" bind:cancel="onCancel" bind:change="onChange" />

在search.js文件中

const { goodsHttp } = require('../../http/api')

Page({ data: { value: '', itemList:[], page:1, kong:false

},
onLoad(){
    this.init();
},
async init(){
    try{
        let {goods:{data}}= await goodsHttp({title:this.data.value,
        page:this.data.page})
        data.forEach(r=>r.description = "人类进步的阶梯人类进步的阶梯，阶梯啊阶梯怎么全是阶梯")
        if(this.data.page==1){
          this.data.itemList=[]
        }
        this.setData({itemList:[...this.data.itemList,...data]})
        if(!data.length){
          this.setData({
            kong:true
          })
        }else{
          this.setData({
            kong:false
          })
        }
        
    }catch(err){
        console.log(err);
    }
},

onChange(e) {
  this.setData({
    value: e.detail,
  });
},
onSearch() {
  this.data.page = 1;
 console.log('搜索' + this.data.value);
 this.init(this.data.value)
},
onCancel() {
  this.data.value='';
  this.data.page = 1;
  this.init()
    console.log('取消' + this.data.value);
},
onReachBottom(){
  this.data.page++;
  this.init()
}

});