1.配置到底部監(jiān)聽(tīng)
在app.json的window里面加入
里面的300表示距離底部300rpx觸發(fā)onReachBottom事件 默認(rèn)50rpx
"window": {
"onReachBottomDistance": 300
},2.在數(shù)據(jù)列表的js頁(yè)面
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
console.log("到底部了");
// 把字符串轉(zhuǎn)為數(shù)字進(jìn)行加減
let page = parseInt(this.data.page)
let last_page = parseInt(this.data.last_page);
// 判斷是否是最后一頁(yè) last_page 是后端返回的當(dāng)前數(shù)據(jù)有多少頁(yè)
if (page < last_page) {
// 當(dāng)前數(shù)據(jù)到底部就把page+1傳入獲取第二頁(yè)數(shù)據(jù)合并
page = parseInt(page + 1);
// console.log(page);
this.setData({
page: page,
});
this.order_list(this.data.page);
} else {
wx.showToast({
title: "沒(méi)有更多數(shù)據(jù)了",
icon: "none",
duration:3000,
})
}
},
// 請(qǐng)求數(shù)據(jù)方法
getClue(page) {
getClueApi({
page
}).then((res) => {
// 請(qǐng)求返回的數(shù)據(jù)
console.log(res.data);
// 把請(qǐng)求到的數(shù)據(jù)與前一次的數(shù)據(jù)合并，第一次的時(shí)候定義的列表要為空[]
let list = []
// 判斷當(dāng)前是否為第一頁(yè)，在還有其他篩選條件的情況下，其他篩選條件更新時(shí)，傳入的this.data.page為1 就會(huì)覆蓋整個(gè)list數(shù)據(jù)
if (page != 1) {
list = [...this.data.list, ...res.data.list.data]
} else {
// 傳入1就初始化為1
this.setData({
page:page
})
// 滾動(dòng)到頂部
wx.pageScrollTo({
scrollTop: 0
})
list = res.data.list.data
}
this.setData({
list: list,
cluestatus: res.data.status,
last_page: res.data.list.last_page
})
})
},
// 其他篩選觸發(fā)的事件
input() {
if (this.data.seek != "") {
// 這里傳入的page為1 所以會(huì)重新覆蓋list數(shù)據(jù)
this.getClue(1, this.data.seek)
} else {
Toast({
position: "top",
message: '請(qǐng)輸入搜索詞!'
});
}
},
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-651557.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-651557.html
到了這里，關(guān)于微信小程序 滾動(dòng)到底部加載新的數(shù)據(jù) 之后滾動(dòng)到頂部的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
