本文將帶你瞭解微信小程序開發之分頁加載,希望本文對大家學微信有所幫助。
分頁加載功能大家遇到的應該會經常遇到,應用場景也很多,例如微博,QQ,微信朋友圈以及新聞類應用,都會有分頁加載的功能,例如你一頁顯示10條數據,第一次(第一頁)請求即開始start爲0結束end是9,第二頁就是從10到19,以此類推。既然要實現分頁加載功能,最重要就是下拉以及上拉的處理事件,在微信小程序中已經幫我們封裝好了上拉以及下拉的觸發事件,
如下
- 頁面相關事件處理函數–監聽用戶下拉動作 */
onPullDownRefresh: function () {
}, - 頁面上拉觸底事件的處理函數
onReachBottom: function () {
},
重寫這兩個函數,我們還需要在json配置文件加入下面代碼{
“enablePullDownRefresh”: true
}
getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid: '25158',
showapi_sign: 'c0d685445898438f8c12ee8e93c2ee74',
keyword: '我',
page: that.data.page
}
network.requestLoading('https://route.showapi.com/213-1', data, message, function (res) {
console.log(res)
var contentlistTem = that.data.contentlist
if (res.showapi_res_code == 0) {
if (that.data.page == 1) {
contentlistTem = []
}
var contentlist = res.showapi_res_body.pagebean.contentlist
if (contentlist.length < that.data.pageSize) {
that.setData({
contentlist: contentlistTem.concat(contentlist),
hasMoreData: false
})
} else {
that.setData({
contentlist: contentlistTem.concat(contentlist),
hasMoreData: true,
page: that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: '加載數據失敗',
})
})
},
page即爲當前請求數據時第幾頁,pageSize是每頁的數據的大小,hasMoreData用於上拉的時候是不是要繼續請求數據,即是不是還有更多數據。當我們網絡請求數據成功後,如果請求數據的長度小於pageSize: 30,那麼就表示沒有更多數據,將hasMoreData更改爲false,如果請求的數據長度是30,表示還有更多數據那麼hasMoreData久更改爲true,並將頁數page加1.當下拉的時候講page先更改爲1,然後去查詢數據,當查詢數據成功時,如果page爲1,就將獲取的數據直接賦值給contentlist,如果頁數大於1的話,就將請求的數據追加在contentlist後面。這樣就可以實現分頁加載的功能了。
onLoad: function (options) {
// 頁面初始化 options爲頁面跳轉所帶來的參數
var that = this
that.getMusicInfo('正在加載數據...')
},
onPullDownRefresh: function () { //頁面相關事件處理函數--監聽用戶下拉動作
this.data.page = 1
this.getMusicInfo('正在刷新數據')
},
onReachBottom: function () { //頁面上拉觸底事件的處理函數
if (this.data.hasMoreData) {
this.getMusicInfo('加載更多數據')
} else {
wx.showToast({
title: '沒有更多數據',
})
}
},