WeChat applet implements waterfall flow paging scrolling loading

class Paging{
  page //Record the current page number count //Record the number of pages displayed req //Interface request object (I have encapsulated it here, and you can define the properties according to your needs)
  url //Request path moreData = true //Is there a next page of data? (By default, there is a next page of data when the request is made for the first time)
  accumulator = [] //Loaded data list locker = false //Lock flag}

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

getMoreData(){
 //1. Determine whether the next page of data exists//2. Get the lock and determine whether the lock is released//3. Request data//4. Release the lock}

if(!this.moreData){
      return
}

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

{
        empty, //Is it empty? items, //Current page data moreData, //Is there a next page of data accumulator //All data that has been requested}

 _getCurrentReq(){
    let url = this.url
    //Set request parameters const params = `page=${this.page}&count=${this.count}`
    //Judge the splicing method if(url.includes('?')){
      url += '&' + params
    }else{
      url += '?' + params
    }
    this.req.url = url
    return this.req
 }

 _actualGetData(){
 
    const req = this._getCurrentReq() //Get the specific request content let paging = Http.request(req) //Call the request method in the custom tool to obtain data //If no result is obtained, return null directly
    if(!paging){
      return null
    }
  
    if (paging.total === 0) {
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }
    
    //If the current page number is less than the total page number, it means there is still data for the next page, set moreData to true, otherwise set it to false
    this.moreData = pageNum < totalPage-1 ? true : false
    
    //If there is data for the next page, increase page by 1 to facilitate the next acquisition if (this.moreData) {
      this.page += 1
    }
    
    //Because the waterfall flow display data needs to be accumulated, the data list also needs to be accumulated this.accumulator = this.accumulator.concat(paging.items)
    return {
      empty: false,
      items: paging.items,
      moreData: this.moreData,
      accumulator: this.accumulator
    }
 }

this.locker = false

initBottomSpuList(){
 //Get the paging object const paging = new Paging({
      url: url
    })
    //Store the paging object in js data this.data.spuPaging = paging
    //Call method const data = paging.getMoreData()
    if(!data){
      return
    }
    //Reload the waterfall flow wx.lin.renderWaterFlow(data.items)
},

onReachBottom: function () {
    const data = this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    //Reload the waterfall flow wx.lin.renderWaterFlow(data.items)
}