小程序开发(12)-之分页封装

这里的分页呢就记录下，上拉加载的，小程序给我们提供了一个监听滚动到底部的周期函数onReachBottom，当页面超过整屏的高度后，滚动页面到底部就会触发这个事件，所以做上拉加载的时候，非常的方便，下面说下我们的封装逻辑

 

先描述下可能需要的ui效果，第一种就是wx.showLoading，在接口调起前后使用wx.showLoading来显示正在加载到状态，这个在(小程序开发(3)-之wx.request封装)中有说到过，还有一种就是供自己自定义loading的ui了，会提供一个loading的字段做为标识位供判断

 

看代码示例，看一看到在util.wxRequest调用前后，我们都调用了page.handlePageParams函数，这个函数来自page.js，so...，我们先看看page.js文件，这里主要是修改了4个字段fetch、loading、isMore、pageNum

 

1、fetch是告诉我们接口请求完成

2、loading就是加载中的状态，如果fetch为true了，那么就不需要loading了，否则loading为true，设置这个字段是为了让我们可以自定义loading，通过这个字段

3、isMore是告诉我们是否已经加载到最后一页了，通过trafficEvent.length >= res.data.data.total，判断当前列表的长度是否大于等于接口返回的总条数了，大于或等于说明已经加载完了

4、pageNum是当前的页码

 

结合onReachBottom、代码示例、page.js，完整的分页流程就走完了

 

#代码示例

getRoadCondition() {
        const { lat: lat, lng: lng} = this.data.point;
        let roadcondition = this.data.roadcondition;
        var _this = this;

        if (!roadcondition.lat || !roadcondition.lng) {
            roadcondition.point.lat = lat;
            roadcondition.point.lng = lng;
        }

        page.handlePageParams.call(this, {
            pageParamsName: 'roadcondition'
        })
        util.wxRequest({
            url: api.getRoadCondition.url,
            data: roadcondition,
            method: 'POST',
            success: function (res) {
                let trafficEvent = _this.data.trafficEvent.concat(res.data.data.list);
                console.log(trafficEvent.length, '--', res.data.data.total);
                page.handlePageParams.call(_this, {
                    pageParamsName: 'roadcondition',
                    isMore: trafficEvent.length >= res.data.data.total,
                    fetch: true
                })
                _this.setData({
                    trafficEvent: trafficEvent
                })
            }
        })
    }

 

#page.js

function handlePageParams(params) {
  return new Promise((resolve, reject) => {
    console.log(params);
    // 定义两种修改pageNum的方式，一种是传入分页参数的名称，一种是页面中默认的参数名称，如果没传默认使用默认的
    var pageParams  = params.pageParamsName ? this.data[params.pageParamsName] : this.data.pageParams;
    // loadind还在加载的状态 isMore判断是否还有数据 fetch请求加载完成
    if (params.fetch) {
      pageParams.loading = false;
      pageParams.isMore = params.isMore;
    } else {
      pageParams.pageNum++;
      pageParams.loading = true;
    }
    
    if (params.pageParamsName) {
      this.setData({
        [`${params.pageParamsName}`]: pageParams,
      })
    } else {
      this.setData({
        pageParams: pageParams,
      })
    }

    resolve();
  })
}

module.exports = {
  handlePageParams: handlePageParams
}