小程序如何實(shí)現(xiàn)分頁加載數(shù)據(jù)功能？下面本篇文章給大家介紹一下。
有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對大家有所幫助。
在使用類似qq，微博或者新聞?lì)惖葦?shù)據(jù)量大的應(yīng)用經(jīng)常會遇到分頁加載功能，它不僅的應(yīng)用場景廣，還能挺高用戶體驗(yàn)。
微信小程序中也可以分頁加載數(shù)據(jù)，這篇文章就是介紹微信小程序怎么制作分頁加載數(shù)據(jù)。
要實(shí)現(xiàn)這樣的功能，一般需要在請求數(shù)據(jù)時(shí)加入當(dāng)前請求頁數(shù)，以及頁的大小（每頁顯示的數(shù)量）也有一部分接口是通過請求的開始偏移量和結(jié)束偏移量請求數(shù)據(jù)，例如你一頁顯示10條數(shù)據(jù)，第一次（第一頁）請求即開始start為0結(jié)束end是9，第二頁就是從10到19，以此類推。
既然要實(shí)現(xiàn)分頁加載功能，最重要就是下拉以及上拉的處理事件，在微信小程序中已經(jīng)幫我們封裝好了上拉以及下拉的觸發(fā)事件，如下/** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh:function () {
}
, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() {
}
,可能剛接觸微信小程序的愛好者，會遇到一個(gè)問題，為什么我重寫了上拉和下拉函數(shù)，但是當(dāng)我上拉或者下拉的時(shí)候函數(shù)為什么不回調(diào)啊。
莫急莫慌，那是因?yàn)槌酥貙戇@兩個(gè)函數(shù)，我們還需要在json配置文件加入下面代碼{
enablePullDownRefresh: true }
有了上面的代碼，我們每次上拉或者下拉就會觸發(fā)相對應(yīng)的函數(shù)了。
在data中創(chuàng)建數(shù)據(jù)data: {
page: 1, pageSize: 30, hasMoreData: true, contentlist: [], }
,page即為當(dāng)前請求數(shù)據(jù)時(shí)第幾頁，pageSize是每頁的數(shù)據(jù)的大小，hasMoreData用于上拉的時(shí)候是不是要繼續(xù)請求數(shù)據(jù)，即是不是還有更多數(shù)據(jù)。
當(dāng)我們網(wǎng)絡(luò)請求數(shù)據(jù)成功后，如果請求數(shù)據(jù)的長度小于pageSize: 30，那么就表示沒有更多數(shù)據(jù)，將hasMoreData更改為false，如果請求的數(shù)據(jù)長度是30，表示還有更多數(shù)據(jù)那么hasMoreData久更改為true,并將頁數(shù)page加1.當(dāng)下拉的時(shí)候講page先更改為1，然后去查詢數(shù)據(jù)，當(dāng)查詢數(shù)據(jù)成功時(shí)，如果page為1，就將獲取的數(shù)據(jù)直接賦值給contentlist，如果頁數(shù)大于1的話，就將請求的數(shù)據(jù)追加在contentlist后面。
這樣就可以實(shí)現(xiàn)分頁加載的功能了。
經(jīng)過上面的分析，我們已經(jīng)對分頁加載的實(shí)現(xiàn)有了一個(gè)清晰的認(rèn)識，那么接下來我就介紹代碼的實(shí)現(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.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ù)有一個(gè)參數(shù)message，它是用來展示加載數(shù)據(jù)時(shí)的提示信息，例如當(dāng)下拉的時(shí)候，提示信息為正在刷新數(shù)據(jù)，當(dāng)上拉的時(shí)候提示正在加載更多數(shù)據(jù)。
那么我們當(dāng)進(jìn)入頁面的時(shí)候開始加載一次數(shù)據(jù)，即在onLoad函數(shù)，如下onLoad: function (options) {
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) var that = this that.getMusicInfo('
正在加載數(shù)據(jù)...'
) }
,然后上拉和下拉函數(shù)的實(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ù)'
, }
) }
}
,分頁功能可以更好的向用戶展示內(nèi)容，留住用戶。
現(xiàn)如今小程序作為用戶獲取信息的新渠道，很多小程序已經(jīng)有了分頁功能，在實(shí)現(xiàn)這一功能最好結(jié)合數(shù)據(jù)，如果處理不當(dāng)容易導(dǎo)致數(shù)據(jù)丟失，造成不必要損失。
推薦：
《小程序開發(fā)教程》以上就是小程序如何實(shí)現(xiàn)分頁加載數(shù)據(jù)功能？的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
即速資訊，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序介紹一般寫什么內(nèi)容
下一篇：
如何開發(fā)小程序插件？相關(guān)文章相關(guān)視頻如何配置小程序業(yè)務(wù)域名如何關(guān)閉微信小程序的聲音微信如何將小程序放入聊天頂部如何開發(fā)一個(gè)音樂播放器小程序？小程序介紹一般寫什么內(nèi)容小程序如何實(shí)現(xiàn)分頁加載數(shù)據(jù)功能？認(rèn)識小程序的目錄結(jié)構(gòu)小程序的rpx長度單位詳解布局奔牛課堂小程序搜素框 [溫州做小程序]