本文轉(zhuǎn)載于稀土掘金技術(shù)社區(qū)——小霖家的混江龍

上滑加載（觸底加載）是 H5 常見的功能，今天我們來看下如何實現(xiàn)。

效果如下：分頁請求開始前，列表滾動，加載動畫出現(xiàn)在屏幕中；分頁請求過程中，加載動畫一直旋轉(zhuǎn)；分頁請求完成后，列表底部插入了新節(jié)點，加載動畫被擠出屏幕。

如此循環(huán)往復(fù)，直到分頁請求無法返回更多數(shù)據(jù)，列表底部展示「沒有更多了」提示，加載動畫隱藏。

首先我會講解上滑加載的原理，并簡單說明 IntersectionObserver 的用法；接著我會給出上滑加載的關(guān)鍵布局代碼、邏輯代碼，接著我會介紹上滑加載需要注意的三個問題，最后我會再做個簡單的總結(jié)。

拳打 H5，腳踢小程序。我是「小霖家的混江龍」，關(guān)注我，帶你了解更多實用的前端武學(xué)。

上滑加載的原理

如圖所示，藍(lán)色矩形代表視口，綠色矩形代表包裹列表和動畫的容器，金黃色矩形代表列表，橙色則代表加載動畫。

最開始時，加載動畫處于視口下方；當(dāng)用戶滾動列表到達(dá)底部時，加載動畫就進(jìn)入了視口，此時可以請求列表下一頁數(shù)據(jù)，請求成功后新節(jié)點插入到列表底部，新節(jié)點把動畫擠出了視口。

也就是說，想實現(xiàn)加載更多，關(guān)鍵就是監(jiān)聽加載動畫有沒有進(jìn)入視口內(nèi)部。我們可以使用 IntersectionObserver^[1] 這個 API 監(jiān)聽動畫有沒有進(jìn)入視口。

IntersectionObserver 使用方法如下，我們首先創(chuàng)建了一個監(jiān)聽器 observer，再用這個監(jiān)聽器去監(jiān)視元素 element。當(dāng) entry.isIntersecting^[2] 為 true 時，說明 element 已經(jīng)進(jìn)入視口。

// 創(chuàng)建監(jiān)聽器
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    console.log('進(jìn)入視口')
  }
})
// 開始監(jiān)聽
observer.observe(element)

上滑加載關(guān)鍵代碼

知道原理后，現(xiàn)在我們來看實現(xiàn)上滑加載的關(guān)鍵代碼，首先是布局代碼：

布局代碼

布局代碼和原理圖相互對應(yīng)，box 是包裹列表和加載動畫的容器、list 有 5 個子元素、list 下方則是加載動畫的容器。

<div class="box">
  <div id="list">
    <div class="item">0</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="loader-box">
    <div id="loader"></div>
    <div id="nothing" class="hidden">沒有更多了~</div>
  </div>
</div>

列表布局很基礎(chǔ)，我們主要看動畫。loader-box 中的 loader 是純 CSS 的加載動畫。我們利用 border 畫出的一個圓形邊框，左、上、右邊框是淺灰色，下邊框是深灰色：

#loader {
  width: 25px;
  height: 25px;
  border: 3px solid #ddd;
  border-radius: 50%;
  border-bottom: 3px solid #717171;
  transform: rotate(0deg);
}

我們給 loader 元素增加一個動畫，讓它從 0 度到 360 度無限旋轉(zhuǎn)，就實現(xiàn)了加載動畫：

#loader {
  ...
  animation: loading 1s linear infinite;
}

@keyframes loading {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

loader 也是我們真正需要監(jiān)聽是否進(jìn)入視口的元素。

邏輯代碼

關(guān)鍵邏輯代碼4和原理中一致，我們只需要監(jiān)聽到動畫 loader 進(jìn)入視口，就直接調(diào)用 pullUp 函數(shù)。

const loader = document.getElementById('loader')
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    pullUp()
  }
}, {
  root: null,
  rootMargin: '0px',
  threshold: 0
})

observer.observe(loader)

上滑加載的兩個注意點

實現(xiàn)上滑加載，我們除了關(guān)鍵完布局代碼、邏輯代碼外，還有三個點需要注意：

加載鎖

第一點，前一次上滑加載未完成之前，不應(yīng)該再次觸發(fā)上滑加載。

為此，我們需要創(chuàng)建一個加載鎖變量 loadLock，數(shù)據(jù)加載前先把 loadLock 賦值為 true，數(shù)據(jù)加載完成后再把 loadLock 賦值為 false。如果 loadLock 一直為 true，就說明前一次加載未完成，我們需要直接 return 結(jié)束 pullUp 函數(shù)。

代碼如下：

let loadLock = false

function pullUp() {
  ...
  if (loadLock) { return }
  loadData()
}

function loadData() {
  ...
  loadLock = true
  setTimeout(() => {
    ...
    loadLock = false
  }, LOADING_TIME)
}

沒有更多數(shù)據(jù)

第二點，需要考慮沒有更多數(shù)據(jù)的情況。上滑加載請求的數(shù)據(jù)是分頁的，一定有請求結(jié)束的情況。請求結(jié)束時，我們需要給用戶一些提示。

我們可以設(shè)置一個 hasMore 變量。hasMore 為 true 表示時候有更多數(shù)據(jù)，為 false 時表示數(shù)據(jù)了，應(yīng)該隱藏加載動畫，展示「沒有更多了」提示。

代碼如下，我限制了分頁數(shù)據(jù)最多只有 LIST_LIMIT_CNT 條：

let hasMore = true

function pullUp() {
  if (!hasMore) { return }
  ...
  loadData()
}

function loadData() {
  ...
  setTimeout(() => {
    if (len >= LIST_LIMIT_CNT) {
      loader.className = 'hidden'
      nothing.className = ''
      hasMore = false
      return
    }
    ...
  }, LOADING_TIME);
}

請求失敗

第三點，需要考慮請求失敗的情況。我們無法保證服務(wù)器一直運轉(zhuǎn)正常，很可能列表前一次分頁請求還成功，后一次分頁請求就失敗了。

這種情況有兩種常見交互：

• 直接展示「請求出錯了」，讓用戶點擊重試。
• 繼續(xù)展示加載動畫，重新請求服務(wù)器數(shù)據(jù)。

因為請求失敗不好模擬，所以 Demo 中只實現(xiàn)了加載鎖和沒有更多數(shù)據(jù)的情況，你可以根據(jù)自己的需要改寫 Demo。

示例代碼

上滑加載、觸底加載 | codepen^[3]

總結(jié)

本文講解了上滑加載的原理——利用 IntersectionObserver 監(jiān)聽加載動畫是否進(jìn)入視口，如果動畫進(jìn)入則請求下一頁數(shù)據(jù)。此外，本文還說明了上滑加載需要注意的三個點：加載鎖、沒有更多數(shù)據(jù)和請求失敗。