微信小程序实现瀑布流分页滚动加载

class Paging{
  page //记录当前页码
  count //记录一页显示的数量
  req //接口请求对象（此处我已封装，可按照自己需求定义属性）
  url //请求路径
  moreData = true //是否存在下一页数据（首次请求时默认存在下一页数据）
  accumulator = [] //已加载的数据列表
  locker = false //锁标识
}

constructor(req, page=0, count=5){
    this.page = page
    this.count = count
    this.req = req
    this.url = req.url
  }

getMoreData(){
 //1、判断是否存在下一页数据
 //2、获取锁，判断锁是否为释放状态
 //3、请求数据
 //4、释放锁
 }

if(!this.moreData){
      return
}

_getLocker(){
    if(this.locker){
      return false
    }
    this.locker = true
    return true
}

{
        empty, //是否为空
        items, //当前页数据
        moreData, //是否存在下一页数据
        accumulator //已经请求过的所有数据
}

 _getCurrentReq(){
    let url = this.url
    //设置请求参数
    const params = `page=${this.page}&count=${this.count}`
    //判断拼接方式
    if(url.includes('?')){
      url += '&' + params
    }else{
      url += '?' + params
    }
    this.req.url = url
    return this.req
 }

 _actualGetData(){
 
    const req = this._getCurrentReq() //获取到具体的请求内容
    
    let paging = Http.request(req) //调用自定义工具中的请求方法，进行数据的获取
    
    //如果没有获取到结果直接返回null
    if(!paging){
      return null
    }
  
    if(paging.total === 0){
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }
    
    //如果当前页码数小于总页码数表示还存在下一页数据，设置moreData为true，否则设置为false
    this.moreData = pageNum < totalPage-1 ? true : false
    
    //如果存在下页数据，将page+1，便于下次的获取
    if(this.moreData){
      this.page += 1
    }
    
    //因瀑布流显示数据需要累加展示，所以数据列表也需要累加
    this.accumulator = this.accumulator.concat(paging.items)
    return{
      empty: false,
      items: paging.items,
      moreData: this.moreData,
      accumulator: this.accumulator
    }
 }

this.locker = false

initBottomSpuList(){
 //获取到paging对象
    const paging = new Paging({
      url: url
    })
    //将paging对象存入js的data中
    this.data.spuPaging = paging
    //调用方法
    const data = paging.getMoreData()
    if(!data){
      return
    }
    //重新加载瀑布流
    wx.lin.renderWaterFlow(data.items)
},

onReachBottom: function () {
    const data = this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    //重新加载瀑布流
    wx.lin.renderWaterFlow(data.items)
}