如何让vue长列表快速加载

目录

• 背景
• 主要内容
• 一、组件对比
• 二、实现思路
• 三、关键方法源码分析
• 四、使用方式
• 五、参数说明
• 总结

  <!--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);
        // 创建 Profile 实例，并挂载到一个元素上
        new Profile({
          propsData:this.componentProps
        }
      ).$mount('.long-item-'+item[this.dataKey]);
  }

 <!--每个节点尺寸发生变化-->
  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]; // 可视区域高度
    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);
  },

  // 根据高度计算节点是否显示
  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.题目顶部在显示范围内 2.题目底部在显示范围内 3.题目顶部和底部都不在显示范围内 
        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>

  <--假设 dataKey=id-->
  <--列表中需要隐藏的节点-->
  hideIds:[1, 2]
  <--列表数据 dataList 内 height 为 **Number**。-->
  dataList:[
    {id:1,height:100},
    {id:2,height:200},
    {id:3,height:300},
    {id:4,height:300},
    {id:5,height:300}
  ]
  <--节点高度-->
  height:100
  <--如果dataList的数据内有height值 不需要设置这个height-->
  <--如果dataList 和 height 都不传递的话，默认为100 可能滚动略有卡顿；-->
  <--建议在每个高度都不相同的时候通过dataList传递，都相同时候通过height传递-->
  <--某个节点宽高发生变化回调方法 返回参数为id 与高度-->
  resized(id, height){ }