微信小程序 分页 Paging对象

微信小程序 分页 Paging对象

书写代码之前已经导入自定义的Http.request方法

定义实例属性(需要结合业务代码)

	req // 这是一个对象，里面包含request方法的参数
    count
    start
    loker = false //数据锁，为了避免多次发送请求，开始是没有锁住的
    url
    moreData = true
    accumulator = [] 

构造函数

    constructor(req, count=10, start=0){
        this.req = req 
        this.url = req.url  // 单独拿出来是为了方便处理
        this.count = count
        this.start = start
    }

数据锁的相关代码

主要作用：为了多次加载数据，一旦有数据在请求，数据锁处于 锁住 的状态


与之相关的函数有两个：

1. 查看当前数据锁的状态
2. 释放数据锁

查看数据锁的状态

查看当前锁的状态，如果锁是false那么就返回true，可以执行

总之，该函数用于判断是否执行getMoreData方法

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

释放数据锁

    _releaseLocker(){
        this.loker = false
    }

获取数据

主函数

    async getMoreData(){
    	// 没有更多的数据
        if(!this.moreData){
            return
        }
        // 数据锁被锁住
        if(!this._getLocker){
            return
        }
        const data = await this._actualGetData()
        this._releaseLocker()  //请求完就将数据锁释放
        return data
    }

预处理req

req是我们由外部传入的，在预处理req时，主要是对req中的url进行处理，因为在分页查询的时候需要传入start和count，我们需要对url字符串进行拼接

但是在拼接字符串的时候，可能会出现两种情况：

• 用户没有自定义参数，那么只需要’?’+parms
• 用户有自定义参数，那么需要’&’+parms

总而言之，就是是否存在"?"的问题，那么就用到了indexof方法来查询，没有的话就会返回-1

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

判断是否还有数据

    /**
     * 判断是否还有数据
     * totalPage:总共的页数
     * pageNum:当前的页码
     */
    static _moreData(totalPage, pageNum){
        return pageNum < totalPage-1
    }

累加数据

concat用于合并数组

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

获取数据并返回给主函数

    async _actualGetData(){
        const req = this._getCurrentReq()
        let paging = await Http.request(req)
        if(!paging){
            return null
        }
        // 没有数据的情况
        if(paging.total === 0){
            return{
                empty:true, //数据是否为空
                items:[], // 数据中的items 
                moreData:false, //是否还有数据
                accumulator:[]  //累加数据
            }
        }

        this.moreData = Page._moreData(paging.totalPage, 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
        }
    }