小程序?qū)崿F(xiàn)列表下拉刷新上拉加載更多。本文主本介紹兩個(gè)方法的使用,分別是:下拉刷新onPullDownRefresh,上拉加載更多onReachBottom,列表實(shí)現(xiàn)前面文章中已實(shí)現(xiàn),請(qǐng)參考地址:http://m.itdecent.cn/p/44b07a86c8ff。
實(shí)現(xiàn)方法:
1、在小程序app.json文件中,對(duì)應(yīng)的window下添加代碼:
"enablePullDownRefresh": true,
2、對(duì)小程序?qū)?yīng)的.js文件中添加data:
data: {
pageNum: 1, // 設(shè)置加載的第幾次,默認(rèn)是第一次
isFirstLoad: true, // 用于判斷List數(shù)組是不是空數(shù)組,默認(rèn)true,空的數(shù)組
hasMore: false, // “加載更多”
}
3、對(duì)小程序中,添加 onPullDownRefresh 和 onReachBottom方法
// 下拉刷新
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)前頁(yè)面的下拉刷新
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();
}
}
此項(xiàng)目主要介紹兩個(gè)方法并結(jié)合導(dǎo)航欄loading顯示正在加載的效果。