JavaScript實(shí)現(xiàn)列表無限加載

android_c 發(fā)布于2019-08-20 16:45 / 3246人閱讀

摘要：起因之前自己在使用這種網(wǎng)站時(shí)，經(jīng)常看到無限加載的效果。原理在需要無限加載的列表底部，埋下一個(gè)隱藏元素。這時(shí)候就需要進(jìn)行列表加載。通過查閱，得知方法返回元素的大小及其相對(duì)于視口的位置。

起因

之前自己在使用這種網(wǎng)站時(shí)，經(jīng)常看到無限加載的效果。
今天正好看到了getBoundingClientRect這個(gè)Api，就想著試試看如何實(shí)現(xiàn)Infinite scroll的效果。

原理

在需要無限加載的列表底部，埋下一個(gè)隱藏元素。
當(dāng)不斷滑動(dòng)時(shí)，隱藏元素將出現(xiàn)在視窗(viewport)里，也就意味著當(dāng)前瀏覽的列表已經(jīng)到底部了。
這時(shí)候就需要進(jìn)行列表加載。
大概的HTML結(jié)構(gòu)如下：


  
    我是文章
    我是文章
    我是文章
    我是文章
    我是文章

也就是：滑動(dòng)列表 => 隱藏的無限加載指示器出現(xiàn)在視圖 => 開始加載

那么重點(diǎn)就是檢測(cè)隱藏的無限加載指示器是否出現(xiàn)在視圖窗口。
還好，我們有getBoundingClientRect這個(gè)Api。

getBoundingClientRect

通過查閱MDN，得知：

Element.getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置。而除了 width 和 height 外的屬性都是相對(duì)于視口的左上角位置而言的。

至于兼容性，一片綠，可以放心使用。

Can I Use getboundingclientrect? Data on support for the getboundingclientrect feature across the major browsers from caniuse.com.

DOMRect 對(duì)象

getBoundingClientRect()方法的返回值是一個(gè) DOMRect 對(duì)象，這個(gè)對(duì)象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合。

對(duì)象的屬性如下圖所示：

其中的 top, left, bottom, right 均是元素自身相對(duì)于視圖左上角而言的。
就top, left屬性而言，很好理解。而bottom, right則一開始搞的有點(diǎn)懵，后面通過devtools觀察，發(fā)現(xiàn)bottom是元素的最底部相對(duì)于視圖窗口左上角而言的，而right則是元素的最右側(cè)相對(duì)于視圖窗口左上角而言的。
其中right-left為元素的寬度,bottom - top則是元素的高度。

檢測(cè)元素是否出現(xiàn)于視圖窗口中

在這里，有兩種情況，一個(gè)是元素是否出現(xiàn)于視圖窗口中，另一種則是元素是否完全出現(xiàn)于視圖窗口中。
兩種情況的區(qū)別在于一個(gè)是部分出現(xiàn)，一個(gè)是完全出現(xiàn)。

下面我把兩種情況都寫出來：

部分出現(xiàn)在視圖窗口中

function checkIsPartialVisible (element) {
  const rect = element.getBoundingClientRect()
  const {
    top,
    left,
    bottom,
    right
  } = rect
  const isPartialVisible = top >= 0 && left >= 0
  return isPartialVisible
}

全部出現(xiàn)于視圖窗口中：

function checkIsTotalVisible (element) {
  const rect = element.getBoundingClientRect()
  const {
    top,
    left,
    bottom,
    right
  } = rect
  const isTotalVisible = (
    top >= 0
    &&
    left >= 0
    &&
    bottom < document.documentElement.clientHeight
    &&
    right < document.documentElement.clientWidth
  )
  return isTotalVisible
}

那么問題來了：我們到底選用那種呢？
從無限加載這個(gè)業(yè)務(wù)場(chǎng)景出發(fā)，埋在列表最下邊的加載觸發(fā)器都非常小且不可見，因此推薦選用第二種，也就是完全出現(xiàn)于視圖窗口的方式。
至于第一種，更適合檢測(cè)該元素是否已經(jīng)出現(xiàn)在視圖窗口，但并不要求全部出現(xiàn)的情況。

實(shí)戰(zhàn)

具體可以看我在jsfiddle上寫的demo：
無限加載實(shí)例

后續(xù)

后續(xù)更多的則是一些性能優(yōu)化的事情，比如debounce或者throttle來減少scroll事件調(diào)用次數(shù)，加入ajax加載，loading indicator等。
那些都是屬于具體的業(yè)務(wù)范圍了，這兒不做討論。