这里的分页呢就记录下，上拉加载的，小程序给我们提供了一个监听滚动到底部的周期函数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
}