使用系統(tǒng)提供的onPullDownRefresh、onReachBottom這2個(gè)事件,
前提需要在app.json或page.json配置文件中設(shè)置,才能使用。
app.json是全應(yīng)用的頁面都可以使用該事件,page.json則只是對(duì)應(yīng)的頁面才可以使用。
屬性
類型
默認(rèn)值
描述
enablePullDownRefresh
Boolean
false
是否開啟下拉刷新。
示例:
app.json:
在app.json文件里設(shè)置window屬性
{
"window":{
"enablePullDownRefresh": true
}
}
page.json:
在page.json文件里直接設(shè)置屬性
{
"enablePullDownRefresh": true
}
示例:
可以結(jié)合導(dǎo)航欄loading顯示正在加載的效果
Page({
data: {
pageNum: 1, // 設(shè)置加載的第幾次,默認(rèn)是第一次
isFirstLoad: true, // 用于判斷List數(shù)組是不是空數(shù)組,默認(rèn)true,空的數(shù)組
hasMore: false, // “加載更多”
},
// 下拉刷新
onPullDownRefresh: function () {
// 顯示導(dǎo)航欄loading
wx.showNavigationBarLoading();
// 調(diào)用接口加載數(shù)據(jù)
this.loadData();
// 隱藏導(dǎo)航欄loading
wx.hideNavigationBarLoading();
// 當(dāng)處理完數(shù)據(jù)刷新后,wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新
wx.stopPullDownRefresh();
},
// 上拉加載
onReachBottom(e) {
let that = this;
if (that.data.hasMore) {
that.setData({
pageNum: that.data.pageNum + 1, // 每次觸發(fā)上拉事件,把pageNum+1
isFirstLoad: false // 觸發(fā)到上拉事件,把isFirstLoad設(shè)為為false
});
that.loadData();
}
},
})