狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

本文轉載于稀土掘金技術社區——小霖家的混江龍

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

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

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

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

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

上滑加載的原理

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

最開始時，加載動畫處于視口下方；當用戶滾動列表到達底部時，加載動畫就進入了視口，此時可以請求列表下一頁數據，請求成功后新節點插入到列表底部，新節點把動畫擠出了視口。

也就是說，想實現加載更多，關鍵就是監聽加載動畫有沒有進入視口內部。我們可以使用 IntersectionObserver^[1] 這個 API 監聽動畫有沒有進入視口。

IntersectionObserver 使用方法如下，我們首先創建了一個監聽器 observer，再用這個監聽器去監視元素 element。當 entry.isIntersecting^[2] 為 true 時，說明 element 已經進入視口。

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

上滑加載關鍵代碼

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

布局代碼

布局代碼和原理圖相互對應，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>

列表布局很基礎，我們主要看動畫。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 度無限旋轉，就實現了加載動畫：

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

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

loader 也是我們真正需要監聽是否進入視口的元素。

邏輯代碼

關鍵邏輯代碼4和原理中一致，我們只需要監聽到動畫 loader 進入視口，就直接調用 pullUp 函數。

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

observer.observe(loader)

上滑加載的兩個注意點

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

加載鎖

第一點，前一次上滑加載未完成之前，不應該再次觸發上滑加載。

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

代碼如下：

let loadLock = false

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

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

沒有更多數據

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

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

代碼如下，我限制了分頁數據最多只有 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);
}

請求失敗

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

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

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

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

示例代碼

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

總結

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