這里的分頁呢就記錄下，上拉加載的，小程序給我們提供了一個監(jiān)聽滾動到底部的周期函數(shù)onReachBottom，當頁面超過整屏的高度后，滾動頁面到底部就會觸發(fā)這個事件，所以做上拉加載的時候，非常的方便，下面說下我們的封裝邏輯

?

先描述下可能需要的ui效果，第一種就是wx.showLoading，在接口調起前后使用wx.showLoading來顯示正在加載到狀態(tài)，這個在(小程序開發(fā)(3)-之wx.request封裝)中有說到過，還有一種就是供自己自定義loading的ui了，會提供一個loading的字段做為標識位供判斷

?

看代碼示例，看一看到在util.wxRequest調用前后，我們都調用了page.handlePageParams函數(shù)，這個函數(shù)來自page.js，so...，我們先看看page.js文件，這里主要是修改了4個字段fetch、loading、isMore、pageNum

?

1、fetch是告訴我們接口請求完成

2、loading就是加載中的狀態(tài)，如果fetch為true了，那么就不需要loading了，否則loading為true，設置這個字段是為了讓我們可以自定義loading，通過這個字段

3、isMore是告訴我們是否已經加載到最后一頁了，通過trafficEvent.length >= res.data.data.total，判斷當前列表的長度是否大于等于接口返回的總條數(shù)了，大于或等于說明已經加載完了

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的方式，一種是傳入分頁參數(shù)的名稱，一種是頁面中默認的參數(shù)名稱，如果沒傳默認使用默認的var pageParams = params.pageParamsName ? this.data[params.pageParamsName] : this.data.pageParams;// loadind還在加載的狀態(tài) isMore判斷是否還有數(shù)據(jù) 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 }

?

總結

以上是生活随笔為你收集整理的小程序开发(12)-之分页封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。