微信小程式分頁載入

2021-08-28 11:59:25 字數 1601 閱讀 2364

要實現這樣的功能，一般需要在請求資料時加入當前請求頁數，以及頁的大小（每頁顯示的數量）也有一部分介面是通過請求的開始偏移量和結束偏移量請求資料，例如你一頁顯示10條資料，第一次（第一頁）請求即開始start為0結束end是9，第二頁就是從10到19，以此類推。

/**


* 頁面相關事件處理函式--監聽使用者下拉動作


*/ onpulldownrefresh: function () ,


/*** 頁面上拉觸底事件的處理函式


*/onreachbottom: function () ,
有了上面的**，我們每次上拉或者下拉就會觸發相對應的函式了。

在data中建立資料

data: ,
page即為當前請求資料時第幾頁，pagesize是每頁的資料的大小，hasmoredata用於上拉的時候是不是要繼續請求資料，即是不是還有更多資料。當我們網路請求資料成功後，如果請求資料的長度小於pagesize: 30，那麼就表示沒有更多資料，將hasmoredata更改為false，如果請求的資料長度是30，表示還有更多資料那麼hasmoredata久更改為true,並將頁數page加1.當下拉的時候講page先更改為1，然後去查詢資料，當查詢資料成功時，如果page為1，就將獲取的資料直接賦值給contentlist，如果頁數大於1的話，就將請求的資料追加在contentlist後面。這樣就可以實現分頁載入的功能了。

經過上面的分析，我們已經對分頁載入的實現有了乙個清晰的認識，那麼接下來我就介紹**的實現。

getmusicinfo: function (message) 


network.requestloading('', data, message, function (res) 


var contentlist = res.showapi_res_body.pagebean.contentlist


if (contentlist.length < that.data.pagesize) )


} else )


}} else )


}}, function (res) )


})},
上面函式就是獲取**列表資訊的請求處理邏輯，該函式有乙個引數message，它是用來展示載入資料時的提示資訊，例如當下拉的時候，提示資訊為正在重新整理資料，當上拉的時候提示正在載入更多資料。

那麼我們當進入頁面的時候開始載入一次資料，即在onload函式，如下

onload: function (options) ,
然後上拉和下拉函式的實現如下

/**


* 頁面相關事件處理函式--監聽使用者下拉動作


*/ onpulldownrefresh: function () ,


/*** 頁面上拉觸底事件的處理函式


*/onreachbottom: function () else )}},

微信小程式分頁載入更多

lower threshold 100 設定觸底高度 true lower threshold 100 bindscrolltolower scrolltolower for wx for item item wx key title font color 特別事項 view text view b...

微信小程式分頁上滑載入

頁面上拉觸底事件的處理函式 onreachbottom this.onloadrecordslist this.getmore1 在頁面一進來的時候 onload 生命週期函式中 載入 this.getmore1 方法 這是定義的引數 return getmore1 method post succ...

微信小程式分頁

page 生命週期函式 監聽頁面載入 onload function options page 頁碼 max count 資料大小 getdata function page,max count success function res var contentlist res.data.list 後...