微信小程序分頁加載
|
分頁加載功能大家遇到的應(yīng)該會經(jīng)常遇到，應(yīng)用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應(yīng)用，都會有分頁加載的功能，這不僅節(jié)省了我們用戶的流量，還提升了用戶體驗。那么今天的這篇文章就是介紹微信小程序中如何實現(xiàn)分頁加載的功能。照例先上源碼及效果圖。
要實現(xiàn)這樣的功能，一般需要在請求數(shù)據(jù)時加入當前請求頁數(shù)，以及頁的大小（每頁顯示的數(shù)量）也有一部分接口是通過請求的開始偏移量和結(jié)束偏移量請求數(shù)據(jù)，例如你一頁顯示10條數(shù)據(jù)，第一次（第一頁）請求即開始start為0結(jié)束end是9，第二頁就是從10到19，以此類推。 既然要實現(xiàn)分頁加載功能，最重要就是下拉以及上拉的處理事件，在微信小程序中已經(jīng)幫我們封裝好了上拉以及下拉的觸發(fā)事件，如下
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
可能剛接觸微信小程序的愛好者，會遇到一個問題，為什么我重寫了上拉和下拉函數(shù)，但是當我上拉或者下拉的時候函數(shù)為什么不回調(diào)啊。莫急莫慌，那是因為除了重寫這兩個函數(shù)，我們還需要在json配置文件加入下面代碼
{
"enablePullDownRefresh": true
}
有了上面的代碼，我們每次上拉或者下拉就會觸發(fā)相對應(yīng)的函數(shù)了。
data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},
page即為當前請求數(shù)據(jù)時第幾頁，pageSize是每頁的數(shù)據(jù)的大小，hasMoreData用于上拉的時候是不是要繼續(xù)請求數(shù)據(jù)，即是不是還有更多數(shù)據(jù)。當我們網(wǎng)絡(luò)請求數(shù)據(jù)成功后，如果請求數(shù)據(jù)的長度小于pageSize: 30，那么就表示沒有更多數(shù)據(jù)，將hasMoreData更改為false，如果請求的數(shù)據(jù)長度是30，表示還有更多數(shù)據(jù)那么hasMoreData久更改為true,并將頁數(shù)page加1.當下拉的時候講page先更改為1，然后去查詢數(shù)據(jù)，當查詢數(shù)據(jù)成功時，如果page為1，就將獲取的數(shù)據(jù)直接賦值給contentlist，如果頁數(shù)大于1的話，就將請求的數(shù)據(jù)追加在contentlist后面。這樣就可以實現(xiàn)分頁加載的功能了。 經(jīng)過上面的分析，我們已經(jīng)對分頁加載的實現(xiàn)有了一個清晰的認識，那么接下來我就介紹代碼的實現(xiàn)。
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: '加載數(shù)據(jù)失敗',
})
})
},
上面函數(shù)就是獲取音樂列表信息的請求處理邏輯，該函數(shù)有一個參數(shù)message，它是用來展示加載數(shù)據(jù)時的提示信息，例如當下拉的時候，提示信息為正在刷新數(shù)據(jù)，當上拉的時候提示正在加載更多數(shù)據(jù)。
onLoad: function (options) {
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
var that = this
that.getMusicInfo('正在加載數(shù)據(jù)...')
},
然后上拉和下拉函數(shù)的實現(xiàn)如下
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
this.data.page = 1
this.getMusicInfo('正在刷新數(shù)據(jù)')
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
if (this.data.hasMoreData) {
this.getMusicInfo('加載更多數(shù)據(jù)')
} else {
wx.showToast({
title: '沒有更多數(shù)據(jù)',
})
}
},
|
