網(wǎng)頁中，列表數(shù)據(jù)的分頁加載、自動加載

BDEEFE 發(fā)布于2019-08-20 11:14 / 1540人閱讀

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

1 簡單說明

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

2 分頁加載

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

data Model 的簡易格式設(shè)計如下:

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

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

分頁加載大體流程為：

根據(jù)offsetPage以及預(yù)定義好的「每次加載數(shù)據(jù)條數(shù)limit」，設(shè)置分段加載的參數(shù)

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

數(shù)據(jù)獲取完成后，將結(jié)果拼接到list數(shù)組后面，同時將fetching置為false、offsetPage++

3 自動加載

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

當繼續(xù)滾動頁面到達底部時，則觸發(fā)自動加載：

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

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

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

借網(wǎng)上的圖說明一下：

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

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

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

4 小tips:

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

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