公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

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

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

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

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

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

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

上滑加載的原理

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

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

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

IntersectionObserver 使用方法如下，我們首先創(chuàng)建了一個(gè)監(jiān)聽器 observer，再用這個(gè)監(jiān)聽器去監(jiān)視元素 element。當(dāng) entry.isIntersecting^[2] 為 true 時(shí)，說明 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)在我們來看實(shí)現(xiàn)上滑加載的關(guān)鍵代碼，首先是布局代碼：

布局代碼

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

<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ǔ)，我們主要看動(dòng)畫。loader-box 中的 loader 是純 CSS 的加載動(dòng)畫。我們利用 border 畫出的一個(gè)圓形邊框，左、上、右邊框是淺灰色，下邊框是深灰色：

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

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

#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)聽到動(dòng)畫 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)

上滑加載的兩個(gè)注意點(diǎn)

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

加載鎖

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

為此，我們需要?jiǎng)?chuàng)建一個(gè)加載鎖變量 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ù)

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

我們可以設(shè)置一個(gè) hasMore 變量。hasMore 為 true 表示時(shí)候有更多數(shù)據(jù)，為 false 時(shí)表示數(shù)據(jù)了，應(yīng)該隱藏加載動(dò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);
}

請(qǐng)求失敗

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

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

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

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

示例代碼

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

總結(jié)

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