小程序 分页组件 工具类

import {Http} from "./http";

class Paging{
    //不关心细节
    //我需要下一页的数据 你能给我吗
    start
    count
    req
    locker=false
    url
    moreData = true
    accumulator = []

    constructor(req,count=10,start=0){
        this.start = start;
        this.count = count;
        this.req = req;
        this.url = req.url
    }
    //分页可能遇到的问题
    //1/一条数据没有空
    //2 最后一页 还没有更多的数据
    //3 累加 100 1-20 21-40 setData重新渲染yemian
    //4非分页数据  正在加载 loading
    //分页数据 正在加载 加载完成 没有更多数据
    //上划页面触底架子啊避免用户重复发送请求
    async getMoreData() {
        if (!this.moreData){
            return
        }
        //发请求
        if (!this._getLocker()) {
            return
        }
        const data = await this._actualGetData()
        this._releaseLocker()
        return  data
    }

    async _actualGetData(){
        const req = this._getCurrentReq()
        let paging =  await Http.request(req)
        if (!paging){
            return null
        }
        //如果为空
        if (paging.total === 0) {
            return {
                empty: true,
                items: [],
                //没有数据
                moreData: false,
                //累加器
                accumulator: []
            }
        }
        this.moreData = Paging._moreData(paging.total_page,paging.page)
        if(this.moreData){
            this.start += this.count
        }
        this._accumulate(paging.items)
        return {
            empty:false,
            items: paging.items,
            moreData:this.moreData,
            accumulator:this.accumulator
        }
    }

    _accumulate(items){
        this.accumulator = this.accumulator.concat(items)
    }

    //判断是不是最后一页
    static _moreData(totalPage,pageNum){
        return pageNum < totalPage-1
    }

    _getCurrentReq(){
        let url = this.url
        const params = `start=${this.start}&count=${this.count}`
        if (url.indexOf('?') !== -1){
            url +='&' + params
        }
        else{
            url +='?' + params
        }
        this.req.url = url
        return this.req
    }

    _getLocker(){
        if (this.locker){
            return false;
        }
        this.locker = true
        return true
    }
    _releaseLocker(){
        this.locker = false
    }
}
export {
    Paging
}

 

import {config} from "../pages/config/config";
import {promisic} from "./utils";

class Http{

    static async request({url,data,method='GET'}){
     const res = await  promisic(wx.request)({
          url:`${config.apiBaseUrl}${url}`,
          data:data,
          method: method,
          header:{
              appkey:config.appkey
          }
        })
        return res.data;
    }

}

export{
    Http
}

  async initBottomSpuList(){
    const paging =  SpuPaging.getLatestPaging()
    const data = await paging.getMoreData()
    if (!data){
      return
    }
    wx.lin.renderWaterFlow(data.items)
  },