怎么讓vue長列表快速加載

小編給大家分享一下怎么讓vue長列表快速加載，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue-long-list-load，滿足特殊條件的長列表加載。支持：1、各個節(jié)點(diǎn)高度不同且可自由設(shè)定 2、各個節(jié)點(diǎn)可修改不影響加載效果 3、可精確的滾動到指定位置。

背景

有個長列表渲染的需求，本來用vue-virtual-scroll-list的。但是每個節(jié)點(diǎn)的高度不一樣，用著有點(diǎn)問題。如果也有相應(yīng)的需求可以參考下我的方案。歡迎大家交流！

vue-long-list-load

滿足特殊條件的的長列表加載。 列表內(nèi)各個節(jié)點(diǎn)高度不一，各個節(jié)點(diǎn)可以進(jìn)行修改，定位到指定位置指定節(jié)點(diǎn)。 

主要內(nèi)容

1. vue-long-list-load 與 vue-virtual-scroll-list 對比

2. vue-long-list-load實(shí)現(xiàn)思路

3. 基本代碼

4. 插件使用方式

5. 插件參數(shù)說明
   

一、組件對比

vue-long-list-load ，vue-virtual-scroll-list兩個插件各有優(yōu)缺點(diǎn)，當(dāng)我們在選擇插件的時候要選擇最適合應(yīng)用場景的插件。下面是兩個插件的基本功能對比。vue-long-list-load 主要特點(diǎn)是適用于各個節(jié)點(diǎn)尺寸不統(tǒng)一的場景，vue-virtual-scroll-list更適用于高度統(tǒng)一節(jié)點(diǎn)以列表長度以w計(jì)的這種列表。

二、實(shí)現(xiàn)思路

主要思想就是通過\color{red}{虛擬dom}虛擬dom占位各個節(jié)點(diǎn)，根據(jù)可顯示視口的變化來展示該展示的節(jié)點(diǎn)。影響可顯示視口的因素的監(jiān)聽，頁面整體寬高變化、節(jié)點(diǎn)高度變化、頁面的滾動定位到某一個節(jié)點(diǎn)等都可能會影響到視口的變化。當(dāng)視口發(fā)生變化后計(jì)算可顯示的節(jié)點(diǎn)，將可顯示的節(jié)點(diǎn)掛載上節(jié)點(diǎn)的組件，不在視口內(nèi)的節(jié)點(diǎn)銷毀組件緊保留一個空的div。下圖為實(shí)現(xiàn)思路的流程圖。

三、關(guān)鍵方法源碼分析

主入口html結(jié)構(gòu)如下，\color{red}{v-for}v?for 展示長列表長度的的節(jié)點(diǎn)，并且通過:style 來設(shè)置一個\color{red}{最小高度}最小高度，設(shè)置最小高度的原因是這個高度值可能不準(zhǔn)確，當(dāng)真正組件渲染完之后計(jì)算出最準(zhǔn)確的高度，如果直接height的話可能會使節(jié)點(diǎn)內(nèi)的組件展示不全。同時每個節(jié)點(diǎn)設(shè)置唯一id（scrollItem_ 唯一標(biāo)識），在根據(jù)數(shù)據(jù)獲取dom信息時候使用。節(jié)點(diǎn)組件定義了唯一的class （long-item- 唯一標(biāo)識），主要用來掛載真實(shí)列表組件，同時監(jiān)聽組件的高度變化。showList[index]來控制節(jié)點(diǎn)是否時候顯示的唯一標(biāo)識。

  <!--html代碼-->
  <template>
    <div 
      :
      :
      :key="item[dataKey]"
      :id="'scrollItem_' + item[dataKey]"
      v-for="(item,index) in dataList" 
      >
      <long-item 
        v-if="showList[index]"
        :dataKey="dataKey" 
        :item="item"
        :boxHeight="item.height||0"
        :direction="direction"
        :heightChange="heightChange"
        :extendCcomments="extendCcomments"> 
      </long-item>
    </div>
  </template>

當(dāng)showList[index]為true的時候，對應(yīng)的節(jié)點(diǎn)顯示。long-item 在mounted生命周期時，回調(diào)extendCcomments。通過\color{red}{Vue.extend Profile}Vue.extendProfile掛載到對應(yīng)的dom上。componentProps是節(jié)點(diǎn)組件傳過來的一些參數(shù)，在掛載的時候全部掛載上。

 <!--掛載組件-->
  extendCcomments(item){
    this.componentProps.item=item
    var Profile = Vue.extend(this.dataComponent);
        // 創(chuàng)建 Profile 實(shí)例，并掛載到一個元素上
        new Profile({
          propsData:this.componentProps
        }
      ).$mount('.long-item-'+item[this.dataKey]);
  }

通過\color{red}{element-resize-detector}element?resize?detector來監(jiān)聽dom尺寸的變化，每個節(jié)點(diǎn)的寬高發(fā)生變化的時候，并且與原來的尺寸不一樣回調(diào)heightChange方法，進(jìn)行尺寸的更新及顯示節(jié)點(diǎn)的操作計(jì)算。

 <!--每個節(jié)點(diǎn)尺寸發(fā)生變化-->
  this.$nextTick(()=> {
    this.$DomListener.listenTo(document.getElementById('long-item-'+this.item[this.dataKey]), (element)=>{
      if(this.boxHeight != element[this.directionConfig.width]){
        this.heightChange(this.item, element[this.directionConfig.width])
      } 
    })
  });

獲取可顯示的視口區(qū)域的方法，頁面滾動和尺寸變化都會調(diào)用到這個方法，所以這個方法在調(diào)用的時候做防抖處理300ms內(nèi)有連續(xù)調(diào)用只會執(zhí)行最后一次調(diào)用，要不然會頻繁計(jì)算影響性能?？娠@示視口區(qū)域計(jì)算方式是當(dāng)前視口 及 前后兩個視口總共三個視口的尺寸。這樣在小的滾動范圍內(nèi)會有較好的體驗(yàn)。

  getShowLimit(startTop) {
    const scrollTop = startTop || this.scrollWrap[this.directionConfig.scrollTo] || 0; // 滾動距離
    this.viewClientHeight = this.scrollWrap[this.directionConfig.width]; // 可視區(qū)域高度
    this.scrollTop = scrollTop
    this.showStart = scrollTop - this.viewClientHeight
    this.showEnd = scrollTop + 2*this.viewClientHeight
    if(this.setTopTimer){
      clearTimeout(this.setTopTimer)
    } 
    this.setTopTimer = setTimeout(() => {
      this.setItemTopheight()
    }, 300);
  },

根據(jù)高度或者寬度來計(jì)算節(jié)點(diǎn)是否顯示，因?yàn)檫@個計(jì)算量比較大避免而且這個方法與其他方法沒有什么關(guān)聯(lián)，直接單獨(dú)開一個\color{red}{獨(dú)立線程}獨(dú)立線程進(jìn)行計(jì)算。通過引入\color{red}{simple-web-worker}simple?web?worker這個插件單獨(dú)開一個線程進(jìn)行計(jì)算顯示節(jié)點(diǎn)。計(jì)算方法主要有三點(diǎn)：當(dāng)前節(jié)點(diǎn)的開頭在顯示視口內(nèi)、當(dāng)前節(jié)點(diǎn)的結(jié)尾在顯示視口內(nèi)、當(dāng)前節(jié)點(diǎn)開頭和結(jié)尾都不在顯示視口內(nèi)。分為這三種情況，只要滿足一種情況，則該節(jié)點(diǎn)就顯示在顯示視口中。

  // 根據(jù)高度計(jì)算節(jié)點(diǎn)是否顯示
  setItemTopheight(){
    let stsartId = this.dataList[0]&&this.dataList[0][this.dataKey]
    let startDom = stsartId && document.getElementById('scrollItem_'+stsartId)
    let startTop = startDom ? startDom[this.directionConfig.offset] : 0
    this.worker = this.$worker.run((dataList,showStart,showEnd, startTop,hideIds,dataKey,height) =>{
      let topHeight = startTop; // 題目頂部距離頂部距離
      let bottomHeight = 0; // 題目底部距離頂部距離
      let showList = []
      for(let i=0,len=dataList.length;i<len;i++){
        let item = dataList[i]
        if(hideIds.indexOf(item[dataKey]) != -1){
          showList[i] = false;
          continue;
        }
        bottomHeight = topHeight + (item.height>=0?item.height:height)
        // 判斷 1.題目頂部在顯示范圍內(nèi) 2.題目底部在顯示范圍內(nèi) 3.題目頂部和底部都不在顯示范圍內(nèi) 
        if((topHeight>=showStart && topHeight<=showEnd)||
          (bottomHeight>=showStart && bottomHeight<=showEnd)||
          (topHeight<showStart && bottomHeight>showEnd) ){
          showList[i] = true}
         else{
          showList[i] = false
        } 
        topHeight += ((item.height>=0?item.height:height));
      }
      return showList
    }, [this.dataList, this.showStart, this.showEnd, startTop, this.hideIds,this.dataKey,this.height])
    .then(res => {
      this.showList = res
    })
    this.worker = null
  },

四、使用方式

安裝vue-long-list-load：

npm install vue-long-list-load --save

項(xiàng)目內(nèi)調(diào)用

<long-list 
 ref="vueLongList"
 dataKey='id' 
 scrollWrap
 :dataList="dataList" 
 :dataComponent="dataComponent" 
 :componentProps="componentProps"
 height=100
 > 
</long-list>

五、參數(shù)說明

部分參數(shù)說明

  <--假設(shè) dataKey=id-->
  
  <--列表中需要隱藏的節(jié)點(diǎn)-->
  hideIds:[1, 2]
  <--列表數(shù)據(jù) dataList 內(nèi) height 為 **Number**。-->
  dataList:[
    {id:1,height:100},
    {id:2,height:200},
    {id:3,height:300},
    {id:4,height:300},
    {id:5,height:300}
  ]
  
  <--節(jié)點(diǎn)高度-->
  height:100
  <--如果dataList的數(shù)據(jù)內(nèi)有height值 不需要設(shè)置這個height-->
  <--如果dataList 和 height 都不傳遞的話，默認(rèn)為100 可能滾動略有卡頓；-->
  <--建議在每個高度都不相同的時候通過dataList傳遞，都相同時候通過height傳遞-->
  
  <--某個節(jié)點(diǎn)寬高發(fā)生變化回調(diào)方法 返回參數(shù)為id 與高度-->
  resized(id, height){ }

以上是“怎么讓vue長列表快速加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！