vue 上拉加载更多,

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

背景

　　需要长列表渲染，原来用vue-virtual-scroll-list。但是每个节点的高度不一样，所以使用起来会有一些问题。如果有相应的需求，可以参考我的方案。欢迎大家交流！

　　vue-长列表-加载

　　满足特殊条件的长列表装载。列表中每个节点的高度是不同的，可以修改每个节点，将指定的节点定位到指定的位置。www.npmjs.com/package/vue…

主要内容

　　vue长列表加载和vue虚拟滚动列表的比较

　　vue长列表加载的实现

　　绝对码

　　插件的使用

　　插件参数描述

一、组件对比

　　vue-long-list-load和vue-virtual-scroll-list插件各有优缺点。我们在选择插件的时候，要选择最适合应用场景的那个。下面是两个插件的基本功能对比。vue-long-list-load的主要特点是适用于节点大小不一致的场景，而vue-virtual-scroll-list更适合于节点高度一致、列表长度以W为单位的列表.

　　包裹

　　vue-长列表-加载

　　虚拟滚动列表

　　Npm地址

　　www.npmjs.com/package/vue…

　　核心

　　空的dom先被占用，显示区域的组件被挂载显示。

　　计算要在当前显示区域显示的元件数量。

　　斜地

　　支持

　　列表中的高度一致性

　　支持

　　列表中的高度不一致

　　支持

　　支持不力

　　滚动到指定的组件。

　　支持

　　高度不一致时计算不准确。

　　滚动事件

　　支持

　　组件高度变化事件

　　支持

　　隐藏组件

　　支持

　　不支持

二、实现思路

　　主要思想是通过\color{red}{ virtual dom}虚拟dom占领各个节点，根据可显示视口的变化显示显示的节点。对影响可显示视口的因素的监控，如页面整体宽度和高度的变化，节点高度的变化，页面滚动定位到某个节点，都可能影响视口的变化。当视口发生变化时，计算可以显示的节点，挂载可以显示的节点的组件，销毁不在视口中的节点的组件，保留一个空的div。下图是实现思路的流程图。

三、关键方法源码分析

　　门户的主要html结构如下：\color{red}{ v-for} vfor显示列表长度长的节点，设置一个\ color {red} {minimum height}最小高度by: style。设置最小高度的原因是这个高度值可能不准确。当渲染真实组件时，可以计算出最精确的高度。如果直接提高高度，节点中的组件可能无法完全显示。同时每个节点设置一个唯一id(scrollItem_ unique ID)，根据数据获取dom信息时使用。一个节点定义一个唯一类(long-item- unique identifier)，主要用于挂载真实列表组件，同时监控组件的高度变化。ShowList[index]是控制何时显示节点的唯一标识符。

　　！- html代码-

　　模板

　　差异

　　：

　　:style= { min-height :(item . height=0？item.height:height) px}

　　:key=item[dataKey]

　　:id=scrollItem_ item[dataKey]

　　数据列表中的v-for=(item，index

　　长项目

　　v-if=showList[index]

　　:dataKey=dataKey

　　:item=item

　　:boxHeight=item.height0

　　:方向=方向

　　:heightChange=heightChange

　　:extendc comments= extendc comments

　　/长项目

　　/div

　　/模板

　　当显示列表[索引]为真实的的时候，对应的节点显示100 .长项目在安装好的生命周期时，回调扩展注释。通过\ color { red } { vue。扩展配置文件} vue。扩展配置文件挂载到对应的数字正射影像图上componentProps是节点组件传过来的一些参数，在挂载的时候全部挂载上。

　　！-挂载组件-

　　extendCcomments(item){

　　this.componentProps.item=item

　　var Profile=vue。延伸(这个。数据成分)；

　　//创建轮廓实例，并挂载到一个元素上

　　新配置文件({

　　propsData:this.componentProps

　　}

　　).$mount(.长项-项[此。datakey])；

　　}

　　通过\ color { red } { element-resize-detector }元素-调整探测器大小来监听数字正射影像图尺寸的变化，每个节点的宽高发生变化的时候，并且与原来的尺寸不一样回调高度变化方法，进行尺寸的更新及显示节点的操作计算。

　　！-每个节点尺寸发生变化-

　　这个. nextTick(()={

　　这个. DOM听(文档。getelementbyid( long-item- this。项【这个。datakey])，(元素)={

　　if(this.boxHeight！=element【这个。方向配置。宽度]){

　　this.heightChange(this.item，element[this。方向配置。宽度])

　　}

　　})

　　});

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

　　getShowLimit(startTop) {

　　const scroll top=start top this。卷轴缠绕[这个。方向配置。滚动到] 0；//滚动距离

　　这个。viewclientheight=this。卷轴缠绕[这个。方向配置。宽度]；//可视区域高度

　　this.scrollTop=scrollTop

　　这个。显示开始=滚动顶部-这。查看客户端高度

　　这个。showend=scroll top 2 * this。查看客户端高度

　　如果(这个。setoptimer){

　　清除超时(这。setoptimer)

　　}

　　这个。setoptimer=setTimeout(()={

　　this.setItemTopheight()

　　}, 300);

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

　　//根据高度计算节点是否显示

　　setItemTopheight(){

　　设stsartId=this。datalist[0]this。datalist[0][this。数据键]

　　let startDom=stsartId document。getelementbyid( scroll item _ stsartId)

　　让startTop=startDom？startDom【这个。方向配置。偏移量]:0

　　this.worker=这个worker.run((dataList，showStart，showEnd，startTop，hideIds，dataKey，height)={

　　设topHeight=startTop//题目顶部距离顶部距离

　　设底部高度=0；//题目底部距离顶部距离

　　let showList=[]

　　对于(设i=0，len=dataList.lengthileni ){

　　let item=dataList[i]

　　如果(hideids。(item[dataKey])的索引！=-1){

　　showList[I]=false；

　　继续；

　　}

　　底部高度=顶部高度(项目。身高=0？项目.高度：高度)

　　//判断1.题目顶部在显示范围内2.题目底部在显示范围内3.题目顶部和底部都不在显示范围内

　　if((顶部高度=showStart顶部高度=showEnd)

　　(底部高度=showStart底部高度=showEnd)

　　(顶部高度显示开始底部高度显示结束)){

　　showList[i]=true}

　　否则{

　　showList[i]=false

　　}

　　topHeight=((item.height=0？项目。身高：身高))；

　　}

　　返回显示列表

　　}，[this.dataList，this.showStart，this.showEnd，startTop，this.hideIds，this.dataKey，this.height])。然后(res={

　　this.showList=res

　　})

　　this.worker=null

四、使用方式

　　安装vue-长列表-加载：

　　npm安装vue-长列表-加载-保存

　　项目内呼叫

　　长名单

　　ref=vueLongList

　　dataKey=id

　　卷轴包装

　　:dataList=dataList

　　:dataComponent=dataComponent

　　:componentProps=componentProps

　　高度=100

　　/长列表

五、参数说明

　　参数

　　解释

　　类型

　　命令的

　　可选值

　　系统默认值

　　scrollWrapId

　　滚动列表容器id

　　线

　　真实的

　　—

　　数据键

　　数据节点中的唯一键值

　　线

　　真实的

　　—

　　数据列表

　　列表数据

　　排列

　　真实的

　　详见以下说明。

　　—

　　数据组件

　　自定义节点组件

　　—

　　真实的

　　—

　　裁判员

　　调用组件的内部方法

　　线

　　错误的

　　—

　　方向

　　轧制方向

　　数字

　　错误的

　　0:纵向，1横向

　　hideIds

　　列表中需要隐藏的节点

　　排列

　　错误的

　　详见以下说明。

　　[]

　　高度

　　节点高度

　　数字

　　错误的

　　—

　　100

　　componentProps

　　由节点传递的参数。

　　目标

　　错误的

　　—

　　{}

　　卷起

　　滚动区的滚动回调方法

　　功能

　　错误的

　　—

　　调整大小

　　改变节点宽度和高度的回调方法

　　功能

　　错误的

　　详见以下说明。

　　部分参数描述

　　lt；-假设dataKey=id -

　　lt；-要在列表中隐藏的节点-

　　hideIds:[1，2]

　　lt；-列表数据dataList中的高度是**Number**。-

　　数据列表：[

　　{id:1，身高：100}，

　　{id:2，身高：200}，

　　{id:3，身高：300}，

　　{id:4，身高：300}，

　　{id:5，身高：300}

　　]

　　lt；-节点高度-

　　身高：100

　　lt；-如果dataList的数据中有高度值，则不需要设置这个高度-

　　lt；-如果没有传递dataList和height，则默认值为100，这可能会导致滚动略有停滞；-

　　lt；-建议每个高度不同时通过dataList传递，所有高度相同时通过height传递-

　　lt；-节点的宽度和高度发生变化。回调方法返回的参数是id和height-

　　已调整大小(id，高度){ }

总结

　　根据项目实践数据，基本上每个节点至少有500个dom节点，平均数量在800个以上。使用主题vue-long-list-load不在渲染区域，将只渲染两个dom节点。按照800个左右dom节点的正常标题，一般渲染区大概有9个节点。如果是N个节点的列表，每次dom加载操作都会减少(n-9)x(800-2) dom的渲染。如果\color{red}{1000 nodes}一个包含1000个节点的列表在每次加载和操作时都会减少\color{red}。无论是第一次渲染还是修改后的重绘，都大大减少了dom的渲染，加快了加载速度，提升了用户体验。该方案已经在项目中实践了一段时间，用户反馈非常好。如果你有类似的场景需求，欢迎使用！交流！

　　以上就是如何让vue长列表快速加载的细节。更多关于vue长列表快速加载的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue 上拉加载更多,

目录

背景

主要内容

一、组件对比

二、实现思路

三、关键方法源码分析

四、使用方式

五、参数说明

总结

相关文章阅读