網頁中，列表數據的分頁加載、自動加載

BDEEFE 發布于2019-08-20 11:14 / 1551人閱讀

摘要：簡單說明實際開發中，當數據量很大時，分頁分段加載是必要的，不能一次性加載所有數據。分頁加載分頁加載時，需要額外維護幾條相關數據當前頁數標志是否還有，另外，可選擇性添加字段，用于表示數據正在加載。

1 簡單說明

實際開發中，當數據量很大時，分頁(分段)加載是必要的，不能一次性加載所有數據。同時，當用戶瀏覽到頁面底部時，自動加載下一段數據并展示，可以增快新頁面內容展現速度，提升用戶體驗。

2 分頁加載

分頁加載時，需要額外維護幾條相關數據：offsetPage(當前頁數)、hasNext(標志是否還有)，另外，可選擇性添加fetching字段，用于表示數據正在加載。

data Model 的簡易格式設計如下:

{
    list: [],
    hasNext: 1,
    offsetPage: 0,
    fetching:true
}

(ps: 服務端需要提供支持分段獲取數據的API，比如可以通過設置limit, offset參數來指定數據區間)

分頁加載大體流程為：

根據offsetPage以及預定義好的「每次加載數據條數limit」，設置分段加載的參數

異步加載數據時，先將fetching屬性置為true，用于顯示loading效果

數據獲取完成后，將結果拼接到list數組后面，同時將fetching置為false、offsetPage++

3 自動加載

分段加載的思路很簡單，下面說說自動加載的一種實現方式，先上實際開發項目中的截圖。
滾動到「接近列表底部」時，可以看到「加載更多」字樣，

當繼續滾動頁面到達底部時，則觸發自動加載：

不難看出這里的實現思路就是「監聽DOM的Scroll事件，當滾動到底部或者很接近的時候，觸發下一頁數據的加載」
具體到coding層面的實現，則需要先了解DOM元素的幾個屬性：scrollHeight、clientHeight、scrollTop等：

scrollHeight：容器元素中全部內容的高度(包括padding)

clientHeight：容器元素的可視區域(注意，這里不一定是瀏覽器窗口的高度)

借網上的圖說明一下：

scrollTop: 滾動位置距離頂部的高度，當尚未滾動時，該值為0.

通過上訴三個值，即可計算出是否已經滾動到容器元素的底部位置了，偽代碼示意如下：

scrollEventListener(){
    let container = getContainerElement();
    if(container.scrollHeight - container.clientHeight - container.scrollTop < [一個較小的值]){
         //加載下一頁
         //getNextPageData()
    }
}

4 小tips:

綁定Scroll事件時，先要確定Container Element, 也就是確定想要哪個容器元素有滾動條，這在DOM層級比較深的時候，容易混淆。一個容易犯的錯誤是沒有給目標Container Element指定overflow樣式的值，導致滾動條實際是父元素的，從而無法觸發Scroll事件。

自動加載的頁數可以視情況做出限制，比如設置為只自動加載前10頁，再往后就需要手動點擊「加載更多」。

云服務器 GPU云服務器分頁加載更多數據顯示 js 分頁異步加載數據 js分頁實現數據加載數據數據加載中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80465.html

網頁中，列表數據的分頁加載、自動加載

摘要：簡單說明實際開發中，當數據量很大時，分頁分段加載是必要的，不能一次性加載所有數據。分頁加載分頁加載時，需要額外維護幾條相關數據當前頁數標志是否還有，另外，可選擇性添加字段，用于表示數據正在加載。 1 簡單說明實際開發中，當數據量很大時，分頁(分段)加載是必要的，不能一次性加載所有數據。同時，當用戶瀏覽到頁面底部時，自動加載下一段數據并展示，可以增快新頁面內容展現速度，提升用戶體驗。...

snifes 2019-08-01 15:45 評論0 收藏0
每日 30 秒 ? 判斷是否為頁面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介分頁、優化、可視區域、無限加載寫前端頁面時最經常遇到的開發需求之一就是渲染后端數據返回的數據對象，當數據對象數量極多的時候便需要進行分頁。常見的分頁方式有三種：在頁面底部生成上一頁、下一頁、頁面列表按鈕。用戶可以很直接的選擇...

callmewhy 2019-08-26 13:36 評論0 收藏0
小程序分頁實踐：編寫可復用分頁組件

摘要：項目中遇到切換列表，每個都需要分頁的需求，分頁流程具有相似性，于是想將分頁封裝為組件，方便應用。組件的復用完成了以上組件，在對其他分頁的頁面，可以直接復用。項目中遇到 tab切換列表，每個tab都需要分頁的需求，分頁流程具有相似性，于是想將分頁封裝為組件，方便應用。組件的應用已寫成一個小demo，效果如下圖所示（數據用mock模擬）： showImg(https://segment...

crelaber 2019-08-26 10:11 評論0 收藏0
基于游標的分頁接口實現

摘要：游標條數的分頁接口實現命令用于迭代數據庫中所有的，但是因為數據中的數量是不能確定的，線上直接執行會被打死的，而且的數量在你操作的過程中也是時刻在變化的，可能有的被刪除，可能期間又有新增的。分頁接口的實現，在偏業務的服務端開發中應該很常見，PC時代的各種表格，移動時代的各種feed流、timeline。出于對流量的控制，或者用戶的體驗，大批量的數據都不會直接返回給客戶端，而是通過...

godruoyi 2019-08-23 13:06 評論0 收藏0