最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何让vue长列表快速加载 让vue长列表快速加载代码示例
时间:2021-03-26 编辑:袖梨 来源:一聚教程网
如何让vue长列表快速加载?本篇文章小编给大家分享一下让vue长列表快速加载代码示例,文章介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
主要内容
vue-long-pst-load 与 vue-virtual-scroll-pst 对比
vue-long-pst-load实现思路
基本代码
插件使用方式
插件参数说明
一、组件对比
vue-long-pst-load ,vue-virtual-scroll-pst两个插件各有优缺点,当我们在选择插件的时候要选择最适合应用场景的插件。下面是两个插件的基本功能对比。vue-long-pst-load 主要特点是适用于各个节点尺寸不统一的场景,vue-virtual-scroll-pst更适用于高度统一节点以列表长度以w计的这种列表。
二、实现思路
主要思想就是通过color{red}{虚拟dom}虚拟dom占位各个节点,根据可显示视口的变化来展示该展示的节点。影响可显示视口的因素的监听,页面整体宽高变化、节点高度变化、页面的滚动定位到某一个节点等都可能会影响到视口的变化。当视口发生变化后计算可显示的节点,将可显示的节点挂载上节点的组件,不在视口内的节点销毁组件紧保留一个空的div。下图为实现思路的流程图。
三、关键方法源码分析
主入口html结构如下,color{red}{v-for}v−for 展示长列表长度的的节点,并且通过:style 来设置一个color{red}{最小高度}最小高度,设置最小高度的原因是这个高度值可能不准确,当真正组件渲染完之后计算出最准确的高度,如果直接height的话可能会使节点内的组件展示不全。同时每个节点设置唯一id(scrolptem_ 唯一标识),在根据数据获取dom信息时候使用。节点组件定义了唯一的class (long-item- 唯一标识),主要用来挂载真实列表组件,同时监听组件的高度变化。showpst[index]来控制节点是否时候显示的唯一标识。
当showpst[index]为true的时候,对应的节点显示。long-item 在mounted生命周期时,回调extendCcomments。通过color{red}{Vue.extend Profile}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]); }
通过color{red}{element-resize-detector}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); },
根据高度或者宽度来计算节点是否显示,因为这个计算量比较大避免而且这个方法与其他方法没有什么关联,直接单独开一个color{red}{独立线程}独立线程进行计算。通过引入color{red}{simple-web-worker}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 bottom; // 题目底部距离顶部距离 let showList = [] for(let i=0,len=dataList.length;i=0?item.height:height) // 判断 1.题目顶部在显示范围内 2.题目底部在显示范围内 3.题目顶部和底部都不在显示范围内 if((topHeight>=showStart && topHeight<=showEnd)|| (bottomHeight>=showStart && bottomHeight<=showEnd)|| (topHeight 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-pst-load:
npm install vue-long-list-load --save
项目内调用
五、参数说明
部分参数说明
<--假设 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){ }
-
上一个: IDEA插件FindBugs的使用解析
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12