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

snifes 發(fā)布于2019-08-01 15:45 / 3239人閱讀

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

1 簡(jiǎn)單說(shuō)明

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

2 分頁(yè)加載

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

data Model 的簡(jiǎn)易格式設(shè)計(jì)如下:

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

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

分頁(yè)加載大體流程為：

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

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

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

3 自動(dòng)加載

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

當(dāng)繼續(xù)滾動(dòng)頁(yè)面到達(dá)底部時(shí)，則觸發(fā)自動(dòng)加載：

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

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

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

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

scrollTop: 滾動(dòng)位置距離頂部的高度，當(dāng)尚未滾動(dòng)時(shí)，該值為0.

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

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

4 小tips:

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

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