uni-app開發經驗分享七: 有關列表數據下拉加載方法的解析及記錄


在使用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,頁面加載第一次數據前,需要初始化下拉數據。

要實現這個功能,是需要三個全局變量,分別為接下來的頁數,是否可以下拉,拼接后用來顯示的數據列表。

我這里設計了一個思路圖如下:

 

 

 

 

根據這個思路,就可以寫出方法了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM