小程式之上拉載入和下拉重新整理
阿新 • • 發佈:2019-01-13
建立Data
/**
* 頁面的初始資料
*/
data: {
articleInfo: [],
// 請求資料是否為空的狀態
flag: true,
// 初始為第一頁
index: 1,
},
分頁請求資料
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
this.getArticleInfo(this.data.index);
},
getArticleInfo: function(index){
// 在回撥函式中返回請求的資料
playModel.getAll({
index: index,
success: (res) => {
let newArticleInfo = res.object;
// 請求資料為空,不請求
if(newArticleInfo.length == 0){
// 修改請求狀態位 false
this.setData({flag: false});
wx.showToast({
title: '已經到底~~',
icon: 'loading',
duration: 2000
})
}else{
// 將請求的資料新增的原來的articleInfo中
let articleInfo = this.data.articleInfo.concat(newArticleInfo);
this.setData({ articleInfo });
}
}
})
},
上拉重新整理
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
if(this.data.flag){
// 頁數加一
let index = this.data.index + 1;
// 更新當前頁
this.setData({index})
// 傳送請求
this.getArticleInfo(index);
}else{
wx.showToast({
title: '已經到底~~',
icon: 'loading',
duration: 2000
})
}
},
下拉重新整理
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
// 初始化頁面資料
this.setData({
articleInfo: [],
index: 1,
flag: true
})
// 傳送請求
this.getArticleInfo(this.data.index);
},