一 簡(jiǎn)要介紹一下onreachBottom事件
onreachBottom和onLoad以及onShow一樣，都屬于小程序的生命周期事件，作用就是在頁(yè)面下拉到底部時(shí)觸發(fā)這個(gè)事件，一般適用于數(shù)據(jù)比較多的情況下，實(shí)現(xiàn)懶加載并分頁(yè)展示數(shù)據(jù)。
截圖中展示了小程序?qū)nreachBottom事件的具體解釋和參數(shù)。
二 實(shí)例展示
此次展示的實(shí)例是在小程序首頁(yè)加載二手車車源信息的下拉分頁(yè)加載數(shù)據(jù)的效果。
- 首先需要在data里面初始化分頁(yè)的頁(yè)數(shù)和獲取的數(shù)據(jù)數(shù)組。
2. 寫好觸底之后加載新數(shù)據(jù)并保留老數(shù)據(jù)的方法。我把加載第一頁(yè)數(shù)據(jù)和觸底加載新數(shù)據(jù)寫在了一個(gè)方法里面，方法里面加入了一個(gè)布爾型的reachBottom參數(shù),在onLoad事件里參數(shù)為false,只加載第一頁(yè);在onreachBottom事件里參數(shù)為true,要加載新的數(shù)據(jù).
3. 向后端請(qǐng)求的方法為util.request,詳情可以看我上一個(gè)博客,貼個(gè)鏈接.這里的參數(shù)比較多,貼圖
4. 將從后端請(qǐng)求的數(shù)據(jù)保存在supplyList中,并且通過(guò)setData方法寫入data中的supplyList中,將總頁(yè)數(shù)也保存在totalPages中,最后每獲取一整頁(yè)的數(shù)據(jù)之后將頁(yè)數(shù)加一,為下頁(yè)調(diào)用數(shù)據(jù)做準(zhǔn)備.方法的整體代碼如下.
getSupplyList(reachBottom) {//參數(shù)表示是否為觸底下拉加載數(shù)據(jù)
wx.showLoading({
title: '加載中...',
});
let that = this;//在回調(diào)甘薯里,this有時(shí)候不能直接用,防止出bug所初始化一個(gè)that
util.request(api.SupplyList, {//發(fā)送請(qǐng)求
type: that.data.type,
page: that.data.page,
limit: that.data.limit,
searchValue: that.data.searchValue//請(qǐng)求的四個(gè)參數(shù)
}).then(function (res) {
console.log(that.data.page);
if (res.errno === 0) {//為0請(qǐng)求成功
let supplyList = res.data.list.map(item => {
item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");//設(shè)置日期格式
item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])//設(shè)置獲取的圖片列表
item.companyLogo = item.companyLogo || item.avatar;
item.companyName = item.companyName || item.nickname;
return item;//將這一條數(shù)據(jù)返回supplyList并保存
});
//觸底加載新數(shù)據(jù)并保留老數(shù)據(jù)
if (reachBottom) {
supplyList = [...that.data.supplyList, ...supplyList]//將新數(shù)據(jù)加入老數(shù)據(jù)中
}
that.setData({//將獲取的值賦值給data中的數(shù)組和總頁(yè)數(shù)
supplyList: supplyList,
totalPages: res.data.pages
});
that.data.page++//所有操作完成后頁(yè)數(shù)加一
wx.hideLoading();
}
}).finally(() => {
wx.hideLoading();
});
},5. 寫好getSupplyList方法之后,可以在onReachBottom觸底加載事件里面進(jìn)行調(diào)用,調(diào)用的時(shí)候要判斷當(dāng)前頁(yè)是否小于總頁(yè)數(shù),小于的話進(jìn)行調(diào)用,并且在每次調(diào)用后將當(dāng)前頁(yè)數(shù)加一,代碼如下.
onReachBottom() {//觸底加載事件
if (this.data.totalPages > this.data.page) {//判斷當(dāng)前也是否小于總頁(yè)數(shù)
this.setData({
page: this.data.page + 1//當(dāng)前頁(yè)加一
});
} else {
return false;
}
this.getSupplyList(true);//調(diào)用方法
},三 遇到的一些問(wèn)題
在實(shí)際開發(fā)這個(gè)過(guò)程當(dāng)中,也遇到了一些問(wèn)題,可以和大家分享一下,互相學(xué)習(xí)
在測(cè)試的時(shí)候,第一次分頁(yè)加載實(shí)現(xiàn)了,后面都沒(méi)有實(shí)現(xiàn),在排查之后,發(fā)現(xiàn)經(jīng)過(guò)第一次的分頁(yè)之后this.data.page即當(dāng)前頁(yè)面變?yōu)榱?,在刷新頁(yè)面之后并沒(méi)有重新初始化為1,所以要在頁(yè)面每次關(guān)閉之后將頁(yè)面重新賦值為1,如圖.
在寫getSupplyList方法時(shí),在data里面定義好的變量使用的時(shí)候總是顯示 undefined 未定義,在csdn上查到了原因,是因?yàn)樵趈s的一些函數(shù)或者回調(diào)函數(shù)中,直接用this可能是無(wú)法訪問(wèn)的,需要重新定義一個(gè)變量代替this,解決方法如下,用that代替this來(lái)使用data中的變量.
如果要實(shí)現(xiàn)想動(dòng)圖里面那樣的無(wú)感觸底加載的功能,只需要在對(duì)應(yīng)的json文件里面加入"onReachBottomDistance": 300,可以在離底部300的時(shí)候就開始執(zhí)行觸底加載事件.
