美文网首页
小程序瀑布流分页(下拉底部自动分页)

小程序瀑布流分页(下拉底部自动分页)

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-09-03 15:11 被阅读0次

首先在json文件里面配置开启下拉到底部触发

  "enablePullDownRefresh": true,

  "enableReachBottom": true,

配置页面数据

showList: [], //页面展示数据

    pagesize: 3, //每页展示的条数

    current: 1, //当前页数

    total: 1, //总页数


 // 这个是后台请求的分页数据

      let list = res.data.data.records

      var arr1 = this.data.showList; //页面此时展示的l列表(数组)

      var arr2 = list; //后端返回的列表(数组)

      arr1 = arr1.concat(arr2); //合并两个数组

      console.log("arr1", arr1);

      that.setData({

        showList: arr1, //合并后更新list

        total: res.data.data.total, //后台返回的列表的总页数   


/**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

    if (!(this.data.showList && this.data.showList.length > 0)) return

    // 获取当前页面展示的总条数

    let currentTotal = this.data.showList.length

    if (currentTotal < this.data.total) { //这里是为了当前条数小于总条数,否则会一直刷新

      var current = this.data.current * 1 + 1 //上滑一次就加载下一页 在当前页数加一  就是加载下一页

      this.setData({

        current: current //更新data中的页数

      })

      // 重新获取list

      this.getList(this.data.tabsStatus); //再次调用(获取下一页的数据)

    } else {

      wx.showToast({

        title: '暂无更多数据', //如果当前页数大于总页数则不会刷新并显示提示

        icon: "none"

      })

    }

  },


 如果有tab切换,需要在切换的时候,把current当前也赋值为1,且showList也要赋值为空

相关文章

网友评论

      本文标题:小程序瀑布流分页(下拉底部自动分页)

      本文链接:https://www.haomeiwen.com/subject/pevunrtx.html