下拉刷新和上拉加載是兩個獨立又聯(lián)系的功能，下拉刷新除了重新請求服務(wù)器數(shù)據(jù)外還要對之前的狀態(tài)和頁碼進(jìn)行初始化，而上拉加載需要服務(wù)器端有分頁機(jī)制，和內(nèi)存中數(shù)據(jù)的添加和頁碼的對應(yīng)變化，以及狀態(tài)的變化。
小程序?qū)ο吕⑿率怯幸欢ㄖС值?，那就是json文件里的enablePullDownRefresh參數(shù)，設(shè)置enablePullDownRefresh后會觸發(fā)js文件中的onPullDownRefresh方法，你可以在里面做要做的事情，比如對頁面的初始化，對數(shù)據(jù)列表的清空等，初始化數(shù)據(jù)后，記得最后執(zhí)行一次wx.stopPullDownRefresh()，將下拉關(guān)閉，否則那些小點點是不會消失的。
tips：下拉刷新的樣式在一定程度上也可以通過backgroundColor和backgroundTextStyle改變。由于enablePullDownRefresh默認(rèn)為false ,這里enablePullDownRefresh=true設(shè)置后才會觸發(fā)onPullDownRefresh方法,還有模擬器測試的時候需要按住頁面后下拉，才會看到刷新提示
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.log("下拉刷新")
let that = this;
that.setData({
pageIndex: 0, // 每次觸發(fā)下拉事件pageIndex=0
})
that.gainLoadingListData()
},
/**
* 初始化數(shù)據(jù)或是下拉刷新數(shù)據(jù)
*/
gainLoadingListData:function() {
let that = this;
let pageIndex = that.data.pageIndex;
let userCode = that.data.userCode;
console.log("pageIndex == ", pageIndex);
networking.gainData(userCode, pageIndex, function (data) {
wx.stopPullDownRefresh(); // 數(shù)據(jù)請求成功后，停止刷新
var array = data;
that.setData({
array: array,
})
}, function (message) {
console.log("message=", message)
})
},
上拉加載，獲取更多數(shù)據(jù)主要利用了js中的onReachBottom方法，它表示“頁面上拉觸底事件的處理函數(shù)”，我們就在這時請求服務(wù)器獲取新的數(shù)據(jù)并且添加到現(xiàn)有數(shù)據(jù)下面。
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.log("上拉加載")
let that = this;
that.setData({
loading: true, //把"上拉加載"的變量設(shè)為false，顯示
pageIndex: that.data.pageIndex + 5
})
// 上拉獲取更多數(shù)據(jù)
this.gainMoreLoadingListData()
},
/**
* 上拉獲取更多數(shù)據(jù)
*/
gainMoreLoadingListData: function () {
let that = this;
let pageIndex = that.data.pageIndex;
let userCode = that.data.userCode;
console.log("pageIndex == ", pageIndex);
networking.gainData(userCode, pageIndex, function (data) {
if (data.length != 0) { // 數(shù)組不為空
var array = that.data.array.concat(data);
for (var index in array) {
var date = new Date(array[index].orderTime)
var y = date.getFullYear();
var m = (date.getMonth() + 1);
var d = date.getDate();
var h = date.getHours();
var mm = date.getMinutes();
m = m > 9 ? m : '0' + m;
d = d > 9 ? d : '0' + d;
// h = h > 9 ? h : '0' + h;
// mm = mm > 9 ? mm : '0' + mm;
var dateStr = [y, m, d,].join('-');
// var timeStr = [h, mm].join(':')
// var format = dateStr + " " + timeStr;
var format = dateStr
array[index].orderTime = format;
}
that.setData({
array: array,
loading: true, //把"上拉加載"的變量設(shè)為false，顯示
})
} else { // 數(shù)組為空
that.setData({
loading: false, //把"上拉加載"的變量設(shè)為true，隱藏
loaded: true, //把"上拉加載完成"的變量設(shè)為false，顯示
})
}
}, function (message) {
console.log("message=", message)
})
},
具體實現(xiàn)可以參考我的GitHub 上的代碼。其中實現(xiàn)了兩種方式加載，一種是下拉刷新和上拉加載結(jié)合，一種是單獨的上拉加載
