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

背景

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

vue-long-list-load

满足特殊条件的的长列表加载。 列表内各个节点高度不一，各个节点可以进行修改，定位到指定位置指定节点。 ponentProps 节点组件要传递的参数 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的渲染，如果\color{red}{1000个节点}1000个节点的列表每次加载和操作的时候相当于减少了\color{red}{726180}726180个dom节点的渲染。首次渲染还有修改后的重绘都大大减少了dom的渲染加快了加载速度提高了用户体验。 此方案已经在项目中实践一段时间，用户反馈很好。如果大家也有类似的场景需求，欢迎大家使用！交流！

以上就是如何让vue长列表快速加载的详细内容，更多关于vue 长列表快速加载的资料请关注其它相关文章！