<!--html代碼-->
  <template>
    <div 
      :
      :style="{'min-height': (item.height>=0?item.height:height) + 'px'}"
      :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>

 <!--掛載組件-->
  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]);
  }

 <!--每個節(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])
      } 
    })
  });

  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)是否顯示
  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
  },

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

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

  <--假設(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 可能滾動略有卡頓；-->
  <--建議在每個高度都不相同的時(shí)候通過dataList傳遞，都相同時(shí)候通過height傳遞-->
  
  <--某個節(jié)點(diǎn)寬高發(fā)生變化回調(diào)方法 返回參數(shù)為id 與高度-->
  resized(id, height){ }