如何让vue长列表快速加载

这篇文章主要介绍了如何让vue长列表快速加载,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

Posted in Vue.js onMarch 29, 2021

vue-long-list-load,满足特殊条件的长列表加载。
支持:

  1. 各个节点高度不同且可自由设定
  2. 各个节点可修改不影响加载效果
  3. 可精确的滚动到指定位置。

背景

有个长列表渲染的需求,本来用vue-virtual-scroll-list的。但是每个节点的高度不一样,用着有点问题。如果也有相应的需求可以参考下我的方案。欢迎大家交流!

vue-long-list-load

满足特殊条件的的长列表加载。 列表内各个节点高度不一,各个节点可以进行修改,定位到指定位置指定节点。 www.npmjs.com/package/vue

主要内容

  1. vue-long-list-load 与 vue-virtual-scroll-list 对比
  2. vue-long-list-load实现思路
  3. 基本代码
  4. 插件使用方式
  5. 插件参数说明

一、组件对比

vue-long-list-load ,vue-virtual-scroll-list两个插件各有优缺点,当我们在选择插件的时候要选择最适合应用场景的插件。下面是两个插件的基本功能对比。vue-long-list-load 主要特点是适用于各个节点尺寸不统一的场景,vue-virtual-scroll-list更适用于高度统一节点以列表长度以w计的这种列表。

组件 vue-long-list-load vue-virtual-scroll-list
npm地址 www.npmjs.com/package/vue… www.npmjs.com/package/vue…
核心 先空dom占位,显示区域内组件挂载显示 计算当前显示区域内要显示的组件挂载
横向 支持 支持
列表内高度一致 支持 支持
列表内高度不一致 支持 支持不好
滚动到指定组件 支持 高度不一致时计算不准确
滚动事件 支持 支持
组件高度改变事件 支持 支持
隐藏组件 支持 不支持

二、实现思路

主要思想就是通过虚拟dom占位各个节点,根据可显示视口的变化来展示该展示的节点。影响可显示视口的因素的监听,页面整体宽高变化、节点高度变化、页面的滚动定位到某一个节点等都可能会影响到视口的变化。当视口发生变化后计算可显示的节点,将可显示的节点挂载上节点的组件,不在视口内的节点销毁组件紧保留一个空的div。下图为实现思路的流程图。

如何让vue长列表快速加载

三、关键方法源码分析

主入口html结构如下,v−for 展示长列表长度的的节点,并且通过:style 来设置一个最小高度,设置最小高度的原因是这个高度值可能不准确,当真正组件渲染完之后计算出最准确的高度,如果直接height的话可能会使节点内的组件展示不全。同时每个节点设置唯一id(scrollItem_ 唯一标识),在根据数据获取dom信息时候使用。节点组件定义了唯一的class (long-item- 唯一标识),主要用来挂载真实列表组件,同时监听组件的高度变化。showList[index]来控制节点是否时候显示的唯一标识。

<!--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>

当showList[index]为true的时候,对应的节点显示。long-item 在mounted生命周期时,回调extendCcomments。通过Vue.extendProfile挂载到对应的dom上。componentProps是节点组件传过来的一些参数,在挂载的时候全部挂载上。

<!--挂载组件-->
 extendCcomments(item){
   this.componentProps.item=item
   var Profile = Vue.extend(this.dataComponent);
       // 创建 Profile 实例,并挂载到一个元素上
       new Profile({
         propsData:this.componentProps
       }
     ).$mount('.long-item-'+item[this.dataKey]);
 }

通过element−resize−detector来监听dom尺寸的变化,每个节点的宽高发生变化的时候,并且与原来的尺寸不一样回调heightChange方法,进行尺寸的更新及显示节点的操作计算。

<!--每个节点尺寸发生变化-->
 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])
     } 
   })
 });

获取可显示的视口区域的方法,页面滚动和尺寸变化都会调用到这个方法,所以这个方法在调用的时候做防抖处理300ms内有连续调用只会执行最后一次调用,要不然会频繁计算影响性能。可显示视口区域计算方式是当前视口 及 前后两个视口总共三个视口的尺寸。这样在小的滚动范围内会有较好的体验。

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);
},

根据高度或者宽度来计算节点是否显示,因为这个计算量比较大避免而且这个方法与其他方法没有什么关联,直接单独开一个独立线程进行计算。通过引入simple−web−worker这个插件单独开一个线程进行计算显示节点。计算方法主要有三点:当前节点的开头在显示视口内、当前节点的结尾在显示视口内、当前节点开头和结尾都不在显示视口内。分为这三种情况,只要满足一种情况,则该节点就显示在显示视口中。

// 根据高度计算节点是否显示
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
},

四、使用方式

安装vue-long-list-load:

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

项目内调用

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

五、参数说明

参数 说明 类型 必填 可选值 默认值
scrollWrapId 列表滚动容器id string true
dataKey 节点数据内唯一键值 String true
dataList 列表数据 Array true 具体见下方说明
dataComponent 自定义的节点组件 true
ref 调用组件内部方法 string false
direction 滚动方向 Number false 0:纵向,1横向 0
hideIds 列表中需要隐藏的节点 Array false 具体见下方说明 []
height 节点高度 Number false 100
componentProps 节点组件要传递的参数 Object false {}
scroll 滚动区域内滚动回调方法 Function false -
resized 某个节点宽高发生变化回调方法 Function false 具体见下方说明

部分参数说明

<--假设 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){ }

总结

项目中实践数据,基本每个节点至少500个dom节点,平均也在800个dom节点以上,用vue-long-list-load 不在渲染区域内的题目只会渲染2个dom节点。按正常800左右个dom节点的题目计算 一般渲染区域渲染的节点在9个左右,如果是n节点的列表 ,每次加载 dom操作都减少(n-9)x(800-2)个dom的渲染,如果1000个节点的列表每次加载和操作的时候相当于减少了726180个dom节点的渲染。首次渲染还有修改后的重绘都大大减少了dom的渲染加快了加载速度提高了用户体验。 此方案已经在项目中实践一段时间,用户反馈很好。如果大家也有类似的场景需求,欢迎大家使用!交流!

Vue.js 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
Vue3 Composition API的使用简介
vue+django实现下载文件的示例
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python求导数的方法
2015/05/09 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python3实现mysql导出excel的方法
2019/07/31 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
护理工作感言
2014/01/16 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
协议书格式
2014/04/23 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
推广普通话演讲稿
2014/05/23 职场文书
财会专业大学生求职信
2014/09/26 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server