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

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頁，再日後就須要手動點擊「加載更多」。