小程序中的下拉刷新上拉加载

小程序中的下拉刷新上拉加载

下拉刷新
在需要下拉刷新的页面中找到json：
配置下拉刷新开启按钮：

 "enablePullDownRefresh": true

在该文件的js 文件配置相关内容：

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pagenum: 1 //当前页码
    })
    this.getDetail(this.data.obj) //重新渲染数据
  },

上拉加载
在需要上拉加载的页面中找到js :
配置相关内容：

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      pagenum: this.data.pagenum + 1  //当页面超出每页的个数，使页面+1
    })
    this.getDetail(this.data.obj)//重新渲染数据
  },

微信小程序下拉刷新上拉加载------小例子

页面的初始数据

/**
   * 页面的初始数据
   */
  data: {
    obj: '',
    catDetail: [],
    pagenum: 1,
    pagesize: 10,

  },

调用相关数据

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options);
    this.setData({
      obj: options
    })
    this.getDetail(options)

  },
  getDetail(obj) {
    // console.log(obj);
    // https://api-hmugo-web.itheima.net/api/public/v1/goods/search
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      data: {
        query: '',
        cid: obj.cid,
        pagenum: this.data.pagenum,
        pagesize: 10
      },
      success: (res) => {
        // console.log(res);
        console.log(res.data.message.goods);
        if (this.data.pagenum == 1) { //若数据较少，一页可展现全部时
          this.setData({
            catDetail: res.data.message.goods
          })
        } else {  //若数据较多，需多页展现全部时
          let ss = [...this.data.catDetail, ...res.data.message.goods]
          this.setData({
            catDetail: ss
          })
        }
      }
    })
  },

上拉刷新上拉加载逻辑

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pagenum: 1
    })
    this.getDetail(this.data.obj)
    console.log(99);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log(222);
    this.setData({
      pagenum: this.data.pagenum + 1
    })
    this.getDetail(this.data.obj)
  },