vue輕松實(shí)現虛擬滾動(dòng)的示例代碼

目錄

前言

移動(dòng)端網(wǎng)頁(yè)的日常開(kāi)發(fā)中,偶爾會(huì )包含一些渲染長(cháng)列表的場(chǎng)景.比如某旅游網(wǎng)站需要完全展示出全國的城市列表,再有將所有通訊錄的姓名按照A,B,C...首字母依次排序展示.

長(cháng)列表的數量一般在幾百條范圍內不會(huì )出現意外的效果,瀏覽器本身足以支撐.可一旦數量級達到上千,頁(yè)面渲染過(guò)程會(huì )出現明顯的卡頓.數量突破上萬(wàn)甚至十幾萬(wàn)時(shí),網(wǎng)頁(yè)可能直接崩潰了.

為了解決長(cháng)列表造成的渲染壓力,業(yè)界出現了相應的應對技術(shù),即長(cháng)列表的虛擬滾動(dòng).

虛擬滾動(dòng)的本質(zhì),不管頁(yè)面如何滑動(dòng),HTML 文檔只渲染當前屏幕視口展現出來(lái)的少量Dom元素.

假設長(cháng)列表有10萬(wàn)條數據,對用戶(hù)而言,他永遠只會(huì )看到屏幕展現出的那十幾條數據.因此頁(yè)面滑動(dòng)時(shí),通過(guò)監聽(tīng)滾動(dòng)事件快速切換視口的數據,就能高度模擬滾動(dòng)效果.

虛擬滾動(dòng)最終只需要渲染少量的Dom元素就能模擬出相似的滾動(dòng)效果,這讓前端工程師開(kāi)發(fā)幾萬(wàn)甚至十幾萬(wàn)條的長(cháng)列表都成為了可能.

下圖是手機上實(shí)測滑動(dòng)一張涵蓋全球所有城市的長(cháng)列表頁(yè)面(源代碼貼在了文章結尾).

滾動(dòng)原理

為了理解虛擬滾動(dòng)的實(shí)現原理,首先觀(guān)察下面圖片.手指向下滑動(dòng)時(shí),HTML頁(yè)面也會(huì )隨之向上滾動(dòng).
通過(guò)圖片標記的距離,我們可以得出這樣的結論.當屏幕視口的上邊沿和id為item的div元素上邊沿重合時(shí),item元素距離長(cháng)列表頂部的距離剛好等于頁(yè)面的滾動(dòng)距離scrollTop(這個(gè)結論會(huì )在后面計算距離時(shí)用到).

虛擬滾動(dòng)為了模擬出逼真的滾動(dòng)效果,首先應該滿(mǎn)足以下兩個(gè)要求.

• 虛擬滾動(dòng)列表的滾動(dòng)條和普通列表保持一致.比如列表包含1000條數據,當瀏覽器使用普通渲染的方式,假設滾動(dòng)條需要向下滾動(dòng)5000px才能貼底.那么應用虛擬滾動(dòng)技術(shù)后,滾動(dòng)條也應該保證具備相同的特征,向下滾動(dòng)5000px才能貼底.
• 虛擬滾動(dòng)只會(huì )渲染視口以及上下兩側的部分Dom元素.隨著(zhù)滾動(dòng)條往下滑動(dòng),視圖的內容要實(shí)時(shí)更新,保證同普通渲染長(cháng)列表時(shí),看到的內容一致.

為了滿(mǎn)足上面的要求,html設計結構如下.

.wrapper是最外層的容器元素,position設置成absolute或relative,子元素依據它做定位.

子元素.background和.list是實(shí)現虛擬滾動(dòng)的關(guān)鍵..background是一個(gè)空的div,但它需要設置高度,高度值等于長(cháng)列表所有列表項高度相加的總和.另外還要將其設置成絕對定位,z-index的值置為-1.

.list內部負責動(dòng)態(tài)渲染視口觀(guān)察到的Dom元素,position設置成absolute.

<template>
  <div class="wrapper">
    <div class="background" :style="{height:`${total_height}px`}"></div>
    <div class="list">
      <div class="line">
        <div class="item lt">BEIJING</div>
        <div class="item gt">北京</div>
      </div>
      <div class="line">
        <div class="item lt">shanghai</div>
        <div class="item gt">上海</div>
      </div>
      <div class="line">
        <div class="item lt">guangzhou</div>
        <div class="item gt">廣州</div>
      </div>
      ... //省略
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  overflow-y: scroll;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
</style>

假如上面代碼total_height等于10000px,頁(yè)面運行效果圖如下所示.
由于子元素.background設置了高度,父元素.wrapper就會(huì )被子元素支撐起來(lái),同時(shí)會(huì )出現滾動(dòng)條.
如果此時(shí)向下滑動(dòng),兩個(gè)子元素.background和.list會(huì )同時(shí)向上滾動(dòng).當滾動(dòng)距離達到了9324px,滾動(dòng)條也抵達了底部.
這是因為父元素.wrapper本身高度為676px,加上滑動(dòng)距離9324px，結果就剛好等于列表總高度10000px.
通過(guò)觀(guān)察以上行為可知,.background雖然只是一個(gè)空的div，但是通過(guò)給它賦予列表的總高度,可以讓右側的滾動(dòng)條和普通長(cháng)列表渲染產(chǎn)生的滾動(dòng)條保持外觀(guān)和行為上一致.

滾動(dòng)條的問(wèn)題解決了,但隨著(zhù)滾動(dòng)條往下滑,數據列表隨之上移,列表全部移出了屏幕之后,接下來(lái)的滑動(dòng)全是白屏.
為了解決白屏問(wèn)題,視口必須始終展現出滑動(dòng)的數據.那么.list元素要根據滑動(dòng)的距離動(dòng)態(tài)更新自身絕對定位的top值,這樣就能確保.list不被劃出屏幕之外.同時(shí)還要依據滑動(dòng)的距離動(dòng)態(tài)渲染當前視口應該展示的數據.

觀(guān)察下面動(dòng)效圖,右側Dom結構展示了滑動(dòng)時(shí)的變化.

滾動(dòng)條往下快速滑動(dòng)后,列表的Dom元素快速渲染刷新.此時(shí)除了.list內部的Dom元素不斷的更換,.list元素自身也在不斷修改transform: translate3d(0, ? px ,0)樣式值(修改translate3d能達到和修改top屬性值相似的效果).

經(jīng)過(guò)上面的講解,虛擬滾動(dòng)的實(shí)現邏輯已經(jīng)清晰.首先js監聽(tīng)滾動(dòng)條的滑動(dòng)事件,再通過(guò)滑動(dòng)距離計算出.list元素要渲染哪些子元素,其次更新.list元素位置.滾動(dòng)條不斷滑動(dòng)時(shí),子元素和位置也不斷更新,視口上便模擬出了滾動(dòng)效果.

實(shí)現

開(kāi)發(fā)的Demo頁(yè)面如下圖所示.列表項包含了以下三種結構:

• 小型列表項,城市首字母單獨成一行,高度為50px;
• 普通列表項,左側英文名,右側中文名,高度為100px;
• 大型列表項,左側英文名,中間中文名,右側一張圖片,高度為150px;

列表數據city_data的json結構類(lèi)似如下,type為1代表采用小型列表項的樣式結構渲染,2代表普通列表項,3代表大型列表項.

[{"name":"A","value":"","type":1},{"name":"Al l'Ayn","value":"艾因","type":2},{"name":"Aana","value":"阿納","type":3} ... ]

city_data包含了長(cháng)列表的所有數據,city_data獲取后先遍歷調整每一項的數據結構(代碼如下).

通過(guò)以下方法處理,每一個(gè)列表項最終都包含一個(gè)top和height值.top表示該項距離長(cháng)列表頂部的長(cháng)度,而height值指該項的高度.
total_height即整個(gè)列表的總高度,最終要賦予上文提及的.background元素.處理完后的數據賦予this.list存儲,并記錄下最小列表項的高度this.min_height.

  mounted () {
     function getHeight (type) { // 根據 type 值返回高度
        switch (type) {
          case 1: return 50;
          case 2: return 100;
          case 3: return 150;
          default:
            return "";
        }
      }
      let total_height = 0;
      const list = city_data.map((data, index) => {
        const height = getHeight(data.type);
        const ob = {
          index,
          height,
          top: total_height,
          data
        }
        total_height += height;
        return ob;
      })
      this.total_height = total_height; //  列表總高度
      this.list = list;
      this.min_height = 50; // 最小高度是50
      //屏幕最大能容納的列表項數量,containerHeight是父容器高度,按照最小高度來(lái)計算
      this.maxNum = Math.ceil(containerHeight / this.min_height);
  }

html根據type值渲染不同的樣式結構(代碼如下).父容器.wrapper綁定一個(gè)滑動(dòng)事件onScroll,列表元素.list內部不是遍歷this.list數組,因為this.list是原始數據,包含了所有的列表項.

<template>模板里面只需要遍歷視口需要展現的數據runList,數組runList包含的數據會(huì )隨著(zhù)滾動(dòng)事件不斷更新.

<template>
  <div class="wrapper" ref="wrapper" @scroll="onScroll">
    <div class="background" :style="{height:`${total_height}px`}"></div>
    <div class="list" ref="container">
      <div v-for="item in runList" :class="['line',getClass(item.data.type)]" :key="item">
        <div class="item lt">{{item.data.name}}</div>
        <div class="item gt">{{item.data.value}}</div>
        <div v-if="item.data.type == 3" class="img-container">
          <img src="../../assets/default.png" />
        </div>
      </div>
    </div>
  </div>
</template>

滾動(dòng)事件觸發(fā)onScroll方法(代碼如下),由于滾動(dòng)條的觸發(fā)頻率非常高,為了減少瀏覽器的計算量,使用requestAnimationFrame函數做一下節流.

滾動(dòng)事件對象e可以獲取當前滾動(dòng)條滑動(dòng)的距離distance.依據distance,只要計算出runList的列表數據以及修改.list的位置信息就大功告成了.

 onScroll (e) {
      if (this.ticking) {
        return;
      }
      this.ticking = true;
      requestAnimationFrame(() => {
        this.ticking = false;
      })
      const distance = e.target.scrollTop;
      this.distance = distance;
      this.getRunData(distance);
 }

如何根據滾動(dòng)距離快速找到屏幕視口下應該渲染的首個(gè)列表項元素呢?

this.list是長(cháng)列表的數據源,其中每一個(gè)列表項都存儲自己距離長(cháng)列表頂部的距離top以及自身的高度height.
上文提到一個(gè)結論,頁(yè)面滾動(dòng)過(guò)程中,如果視口的上邊沿和某個(gè)列表項的上邊沿剛好重合時(shí),滑動(dòng)距離scrollTop剛好等于該列表項距離長(cháng)列表頂部的距離top.

那么此時(shí)如果頁(yè)面再往上挪動(dòng)一點(diǎn),視口下第一個(gè)列表項只顯示了部分,另一部分劃出了屏幕外看不見(jiàn).這時(shí)我們仍然判定視口下的起始元素仍然是該列表項,除非它繼續往上移動(dòng)直至徹底移出屏幕.

那么我們判端視口下渲染的第一個(gè)元素的標準便是頁(yè)面的滾動(dòng)距離scrollTop位于該列表項元素的top和top + height之間.

依據上面原理,可以采用二分法實(shí)現快速查詢(xún)(代碼如下).

//二分法計算起始索引,scrollTop為滾動(dòng)距離
getStartIndex (scrollTop) {
      let start = 0, end = this.list.length - 1;
      while (start < end) {
        const mid = Math.floor((start + end) / 2);
        const { top, height } = this.list[mid];
        if (scrollTop >= top && scrollTop < top + height) {
          start = mid;
          break;
        } else if (scrollTop >= top + height) {
          start = mid + 1;
        } else if (scrollTop < top) {
          end = mid - 1;
        }
      }
      return start;
}

二分法計算出了視口下渲染的第一個(gè)元素位于this.list數組中的索引,命名為起始索引start_index.接下來(lái)進(jìn)入核心函數getRunData(代碼如下).它主要做了以下兩件事.

• 動(dòng)態(tài)更新runList列表數據
• 動(dòng)態(tài)更新.list長(cháng)列表元素的的位置

實(shí)際開(kāi)發(fā)中,假設屏幕高度為1000px,最小的列表項為50px,那么屏幕所能容納的最大列表項數量this.maxNum為20個(gè).
根據滑動(dòng)距離計算出起始索引start_index,再從數據源this.list依據start_index截取20個(gè)元素賦予this.runList不就完成數據更新了嗎?

this.runList如果只盛放剛好一個(gè)屏幕容納的最大數量,當滾動(dòng)條快速滾動(dòng)后,界面的渲染速度會(huì )跟不上手指滑動(dòng)速度,底部會(huì )有白屏閃爍.

解決此問(wèn)題的方法可以在HTML文檔上多渲染一點(diǎn)緩沖數據.比如下面getRunData函數會(huì )渲染能容納三張屏幕高度的列表項數量,分別對應上屏、中屏和下屏.

中屏即當前視口對應的屏幕,上屏和下屏存放著(zhù)視口上下兩邊沒(méi)有展現的緩沖Dom.首先利用二分法可以查詢(xún)到屏幕視口下第一個(gè)列表項元素索引start_index,那么上屏和下屏的首個(gè)列表項索引也能依據start_index輕松得出.

 getRunData (distance = null) {

      //滾動(dòng)距離
      const scrollTop = distance ? distance : this.$refs.container.scrollTop;

      //在哪個(gè)范圍內不執行滾動(dòng)
      if (this.scroll_scale) {
        if (scrollTop > this.scroll_scale[0] && scrollTop < this.scroll_scale[1]) {
          return;
        }
      }

      //起始索引
      let start_index = this.getStartIndex(scrollTop);
      start_index = start_index < 0 ? 0 : start_index;

      //上屏索引,this.cache_screens默認為1,緩存一個(gè)屏幕
      let upper_start_index = start_index - this.maxNum * this.cache_screens;
      upper_start_index = upper_start_index < 0 ? 0 : upper_start_index;

      // 調整offset
      this.$refs.container.style.transform = `translate3d(0,${this.list[upper_start_index].top}px,0)`;

      //中間屏幕的元素
      const mid_list = this.list.slice(start_index, start_index + this.maxNum);

      // 上屏
      const upper_list = this.list.slice(upper_start_index, start_index);

      // 下屏元素
      let down_start_index = start_index + this.maxNum;

      down_start_index = down_start_index > this.list.length - 1 ? this.list.length : down_start_index;

      this.scroll_scale = [this.list[Math.floor(upper_start_index + this.maxNum / 2)].top, this.list[Math.ceil(start_index + this.maxNum / 2)].top];

      const down_list = this.list.slice(down_start_index, down_start_index + this.maxNum * this.cache_screens);

      this.runList = [...upper_list, ...mid_list, ...down_list];

   }

滾動(dòng)事件觸發(fā)的頻率很高,作為開(kāi)發(fā)者而言,我們要盡可能減少瀏覽器的計算量.因此組件內可以緩存一個(gè)滾動(dòng)范圍,即數組this.scroll_scale(數據結構類(lèi)似于[5000,5675]),滑動(dòng)距離處于該范圍下,瀏覽器不用更新列表數據.

滾動(dòng)距離scrollTop一旦處于滾動(dòng)范圍內,getRunData函數不做任何操作,手指滑動(dòng)時(shí)就利用默認的滾動(dòng)行為,讓.list元素隨著(zhù)手指上下移動(dòng).

假設滾動(dòng)方向向下,當scrollTop跑出了滾動(dòng)范圍后,滑動(dòng)視口.wrapper的上邊沿和下一個(gè)列表項上邊沿重合的一瞬間,getRunData函數先計算出起始索引start_index,再通過(guò)start_index得到上屏第一個(gè)元素索引upper_start_index.

由于之前組件掛載時(shí)每個(gè)列表項都緩存了自己距離長(cháng)列表頂部的距離,因此通過(guò)this.list[upper_start_index].top就能拿到.list元素應該被賦予的位置信息.然后重新計算出新的列表數據runList渲染頁(yè)面,并緩存新?tīng)顟B(tài)下的滾動(dòng)范圍.

至此虛擬滾動(dòng)通過(guò)以上幾步操作就實(shí)現了.上面介紹的實(shí)踐方法雖然用起來(lái)很簡(jiǎn)單,但前提需要設計師規劃設計稿時(shí)將不同樣式列表項的高度率先定義.

如果列表項的高度需要根據里面內容自然撐開(kāi),無(wú)法做到在頁(yè)面設計時(shí)定死,可以閱讀下面的參考文章實(shí)現.
雖然列表項高度自適應情形下實(shí)現的虛擬滾動(dòng)聽(tīng)上去很誘人,但是它需要增加額外的處理步驟以及面對新的問(wèn)題(比如列表項包含異步加載的圖片時(shí),高度計算會(huì )變的困難),另外還會(huì )大大增加瀏覽器的計算量.因此設計稿的列表項是否需要定義高度可依據具體場(chǎng)景而定.

源代碼

參考

到此這篇關(guān)于vue輕松實(shí)現虛擬滾動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)vue 虛擬滾動(dòng)內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！