微信小程序 搜索功能

小程序搜索页面：

<!--pages/search/search.wxml-->
<van-search value="{{ value }}" 
placeholder="请输入关键词" 
show-action 
bind:search="onSearch" 
bind:cancel="onCancel" 
bind:change="onChange"  
input-align="center"/>
<ListItem itemList="{{itemList}}" />
<van-toast id="van-toast" />
<view wx:if="{{noMore}}" class="tip">没有更多数据啦！！！</view>

json页

{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "ListItem":"/components/ListItem/ListItem",
    "van-toast": "@vant/weapp/toast/index"
  },
  "navigationBarTitleText": "搜索",
  "onReachBottomDistance": 50
}

// pages/search/search.js
const { goodsHttp } = require('../../http/api')
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast.js';
Page({
  data: {
    value: "",
    itemList: [],
    noMore: false,
    page: 1
  },
  onChange: function (e) {
    this.setData({ value: e.detail })
  },
  onSearch: function () {
    this.data.page = 1;
    this.init()
  },
  onCancel: function () {
    this.data.page = 1;
    this.data.value = "";
    this.init()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.init();
  },
  async init() {
    try {
      let { goods: { data } } = await goodsHttp({ page: this.data.page, title: this.data.value });
      data.forEach(r => r.description = '书籍是人类进步的阶梯');
      if (this.data.page == 1) {
        this.data.itemList = [];
      };
      if (!data.length) {
        this.setData({ 
          noMore: true 
        })
      } else {
        this.setData({
          noMore: false
        })
      };
      this.setData({ itemList: this.data.itemList.concat(data) });
      Toast.clear();
    } catch (err) {
      console.log(err)
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.data.page++;
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    });
    this.init();
  }
})