- 本文將簡單介紹微信小程序如何實(shí)現(xiàn)上拉加載（分頁加載）
- 將要使用的api：
- wx.request(Object object)
主要思想是：當(dāng)用戶滑到頁面底部会钝，或是距離頁面底部x時(shí)（x可以自定義），觸發(fā)頁面的觸底監(jiān)聽函數(shù)吊档，然后調(diào)用開發(fā)者設(shè)計(jì)的觸底函數(shù)判沟，進(jìn)行相關(guān)請求。其中恶导，請求第二頁的數(shù)據(jù)時(shí)浆竭，會對返回的數(shù)組與原有的數(shù)組合并，并把新數(shù)組發(fā)送到data中惨寿，渲染到頁面邦泄。
本文將按此后端接口進(jìn)行介紹，接口如圖：
api.png
小程序端js代碼如下：
data: {
//消息列表數(shù)據(jù)
noticeList: [],
//頁碼
pageNum:1,
},
//觸底響應(yīng)函數(shù)
onBottom(){
var that = this;
(this.data.pageNum)++;
this.getNoticeList();
},
getListSuccess(res){
//成功回調(diào)函數(shù)裂垦，具體需要根據(jù)業(yè)務(wù)需求設(shè)計(jì)分支結(jié)構(gòu)顺囊，此處省略
if (this.data.pageNum == 1) {
this.setData({
noticeList: res.data.data.list,
})
} else {
//獲取原始列表
let noticeList = that.data.noticeList;
//獲取新列表
let arr = res.data.list;
//新列表數(shù)據(jù)與原列表數(shù)據(jù)合并
let newArr = noticeList.concat(arr);
this.setData({
noticeList: newArr,
})
}
},
//獲取列表失敗的回調(diào)函數(shù)
getListFail(err){
wx.showToast({
title: '獲取失敗，請稍后重試',
icon:'none',
duration:2500,
})
},
getNoticeList(){
//請求的接口地址
let url = '/notice/getList';
//當(dāng)前的頁碼
let pageNo = this.data.pageNum;
//某些業(yè)務(wù)數(shù)據(jù)蕉拢，如
let id = this.data.id;
//一頁包含幾條數(shù)據(jù)
let pageSize = 20;
let data = {
id: id,
pageNo: pageNo,
pageSize: pageSize,
}
//調(diào)用了一個(gè)自己封裝了的wx.request函數(shù)特碳，無需關(guān)注，其參數(shù)和wx.request的差不多對應(yīng)
//url是請求地址晕换，'post'是請求頭午乓，data是請求參數(shù)
//this.getListSuccess和this.getListFail分別是成功和失敗的回調(diào)函數(shù)
$.ajax(url, 'POST', data, this.getListSuccess, this.getListFail);
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
this.onBottom();
},
除此之外，我們還可以在相關(guān)頁面的json代碼中設(shè)置：
"onReachBottomDistance":100
描述：頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離闸准，單位為px益愈。
歡迎大家多多指教，一起交流~
