在使用uni.request獲取后台數據時,我們往往碰到一個問題,列表的懶加載及數據實時更新,這里記錄下我制作這類功能的方法。
問題描述:后台返回數據,前端需要進行10個為一組來分頁,先顯示前10個,下拉時再顯示10個,當到底時,第一次到底顯示下無數據的提示。
解決辦法:前端制作分頁,下拉方法。
分頁方法思路:
這個方法的作用是把一維數組分成10個一組的二維數組,方法如下:
PaginationFun(arr){ let newArr = [] //首先創建一個新的空數組。用來存放分割好的數組 for (let i = 0; i < arr.length;) { //注意:這里與for循環不太一樣的是,沒有i++ newArr.push(arr.slice(i, i += 10)); } return newArr; }
下拉方法思路:
下拉的作用是需要把分頁處理好的數據進行分段加載,還要有下面三種功能:
1,頁面跳轉回來后需要重新加載數據。
2,頁面下拉時需要進行數據拼接。
3,頁面加載第一次數據前,需要初始化下拉數據。
要實現這個功能,是需要三個全局變量,分別為接下來的頁數,是否可以下拉,拼接后用來顯示的數據列表。
我這里設計了一個思路圖如下:
根據這個思路,就可以寫出方法了。