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

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

作者: 扶得一人醉如苏沐晨 | 来源:发表于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