怎么让vue长列表快速加载

小编给大家分享一下怎么让vue长列表快速加载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

vue-long-list-load,满足特殊条件的长列表加载。支持:1,各个节点高度不同且可自由设定2,各个节点可修改不影响加载效果,可精确的滚动到指定位置。

背景

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

vue-long-list-load

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

主要内容

<李>

vue-long-list-load与vue-virtual-scroll-list对比

<李>

vue-long-list-load实现思路

<李>

基本代码

<李>

插件使用方式

<李>

插件参数说明

一、组件对比

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

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

二,实现思路

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

三,关键方法源码分析

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

,, & lt; !——html代码——比; 　　& lt;才能template> 　　,,,& lt; div  　　,,,,,, 　　,,,,,, 　　,,,,,:关键=跋钅縖dataKey]“; 　　,,,,,:id=? # 39; scrollItem_& # 39;, +,项[dataKey]“; 　　,,,,,)=?项目、索引),dataList"拷贝, 　　,,,,,在 　　,,,,,& lt; long-item  　　,,,,,,,v=皊howList(指数)“; 　　,,,,,,,:dataKey=癲ataKey", 　　,,,,,,,:项=癷tem" 　　,,,,,,,:boxHeight=癷tem.height | | 0“; 　　,,,,,,,:方向=癲irection" 　　,,,,,,,:heightChange=癶eightChange" 　　,,,,,,,:extendCcomments=癳xtendCcomments"祝辞, 　　,,,,,& lt;/long-item> 　　,,,& lt;/div> 　　& lt;才能/template>

当showList(指数)为真正的时候,对应的节点显示.long-item在安装生命周期时,回调extendCcomments。通过\{红}{Vue颜色。扩展配置文件}Vue。extendProfile挂载到对应的dom上.componentProps是节点组件传过来的一些参数,在挂载的时候全部挂载上。

, & lt; !——挂载组件——比; 　　extendCcomments才能(项){ 　　,,,this.componentProps.item=项目 　　,,,var  Profile =, Vue.extend (this.dataComponent); 　　,,,,,,,//,创建,Profile 实例,并挂载到一个元素上 　　,,,,,,,new 概要({ 　　,,,,,,,,,propsData: this.componentProps 　　,,,,,,,} 　　,,,,,)。美元山(& # 39;.long-item & # 39; +项目[this.dataKey]); 　　以前,,}

通过{红}{element-resize-detector}元素\颜色?调整吗?探测器来监听dom尺寸的变化,每个节点的宽高发生变化的时候,并且与原来的尺寸不一样回调heightChange方法,进行尺寸的更新及显示节点的操作计算。

怎么让vue长列表快速加载