如何实现小程序瀑布式分页（下滑刷新列表）

wxss界面（showList就是展示的list数据）

JSON文件（开启下拉触底监听，和上滑监听）

js文件中的data

js获取数据处理

getList() {

    let that = this

    let params = {

      method: 'get',

      url: "/coldchain/swintradeinfo/page",

      data: {

        draftstatus: "0",

        current: that.data.curpage,

        size: that.data.pagesize,

      }

    }

    app.$request(params).then((res) => {

      // 请求之前将数据赋空

      that.setData({

        showList: []

      })

      let list = res.data.data.records

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

      var arr2 = list; //后端返回的列表（数组）

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

      that.setData({

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

        total: res.data.data.total, //后台返回的列表的总页数   如果后台未返回 你可以直接使用列表长度除以每一页的页数然后上摄入（比如 Math.ceil(1.2)  // 2 ），因为多出来的两条数据也是一页 比如103条数据每页展示10条，10.3 那就是11页

      })

    })

  },

/**

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

   */

  onReachBottom() {

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

    let currentTotal = this.data.showList.length //当前页面已经有的总数据

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

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

      this.setData({

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

      })

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

    } else {

      wx.showToast({

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

        icon: "none"

      })

    }

  },