微信小程式分頁載入資料
在使用類似qq,微博或者新聞類等資料量大的應用經常會遇到分頁載入功能,它不僅的應用場景廣,還能挺高使用者體驗。微信小程式中也可以分頁載入資料,這篇文章就是介紹。
要實現這樣的功能,一般需要在請求資料時加入當前請求頁數,以及頁的大小(每頁顯示的數量)也有一部分介面是通過請求的開始偏移量和結束偏移量請求資料,例如你一頁顯示10條資料,第一次(第一頁)請求即開始start為0結束end是9,第二頁就是從10到19,以此類推。既然要實現分頁載入功能,最重要就是下拉以及上拉的處理事件,在微信小程式中已經幫我們封裝好了上拉以及下拉的觸發事件,如下
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh:function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function() {
},
可能剛接觸微信小程式的愛好者,會遇到一個問題,為什麼我重寫了上拉和下拉函式,但是當我上拉或者下拉的時候函式為什麼不回撥啊。莫急莫慌,那是因為除了重寫這兩個函式,我們還需要在json配置檔案加入下面程式碼
{
enablePullDownRefresh: true
}
有了上面的程式碼,我們每次上拉或者下拉就會觸發相對應的函數了。
在data中建立資料
data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},
page即為當前請求資料時第幾頁,pageSize是每頁的資料的大小,hasMoreData用於上拉的時候是不是要繼續請求資料,即是不是還有更多資料。當我們網路請求資料成功後,如果請求資料的長度小於pageSize: 30,那麼就表示沒有更多資料,將hasMoreData更改為false,如果請求的資料長度是30,表示還有更多資料那麼hasMoreData久更改為true,並將頁數page加1.當下拉的時候講page先更改為1,然後去查詢資料,當查詢資料成功時,如果page為1,就將獲取的資料直接賦值給contentlist,如果頁數大於1的話,就將請求的資料追加在contentlist後面。這樣就可以實現分頁載入的功能了。
經過上面的分析,我們已經對分頁載入的實現有了一個清晰的認識,那麼接下來我就介紹程式碼的實現。
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: \'載入資料失敗\',
})
})
},
上面函式就是獲取音樂列表資訊的請求處理邏輯,該函式有一個引數message,它是用來展示載入資料時的提示資訊,例如當下拉的時候,提示資訊為正在重新整理資料,當上拉的時候提示正在載入更多資料。
那麼我們當進入頁面的時候開始載入一次資料,即在onLoad函式,如下
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: \'沒有更多資料\',
})
}
},
分頁功能可以更好的向用戶展示內容,留住使用者。現如今小程式作為使用者獲取資訊的新渠道,很多小程式已經有了分頁功能,在實現這一功能最好結合資料,如果處理不當容易導致資料丟失,造成不必要損失。
更多微信小程式開發教程關注小程式資訊