本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載的具體代碼，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鼓樓,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
DEMO下載
效果圖
原理
利用微信小程序的onPullDownRefresh函數(shù)（下拉刷新監(jiān)聽函數(shù)）和onReachBottom函數(shù)（上拉加載監(jiān)聽函數(shù)）監(jiān)聽頁面的下拉和上拉動(dòng)態(tài)，從而對頁面數(shù)據(jù)進(jìn)行修改！
頁面配置JSON
重慶分公司
重慶分公司
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
WXML
Item -- {{item}}
JS
此處用setTimeout模擬請求數(shù)據(jù)；
加載數(shù)據(jù)限制三次，調(diào)用wx.showToast顯示沒有更多數(shù)據(jù)。
Page({
data: {
dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
count : 0
},
onPullDownRefresh(){
var self = this;
setTimeout(() => {
// 模擬請求數(shù)據(jù)，并渲染
var arr = self.data.dataList, max = Math.max(...arr);
for (var i = max + 1; i <= max + 3; ++i) {
arr.unshift(i);
}
self.setData({ dataList: arr });
// 數(shù)據(jù)成功后，停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
onReachBottom(){
var arr = this.data.dataList, max = Math.max(...arr);
if (this.data.count < 3) {
for (var i = max + 1; i <= max + 5; ++i) {
arr.push(i);
}
this.setData({
dataList: arr,
count: ++this.data.count
});
} else {
wx.showToast({
title: '沒有更多數(shù)據(jù)了！',
image: '../../src/images/noData.png',
})
}
}
})
總結(jié)
必須在每次數(shù)據(jù)請求完成后，使用wx.stopPullDownRefresh()停止下拉刷新。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
