Vue实现虚拟滚动渲染

 Vue虚拟滚动渲染


适用场景:

主要用于长列表首屏加载速度慢问题,DOM加载过多“无用”元素。

实现原理:

Vue实现虚拟滚动渲染_第1张图片

1. 创建一个虚拟的盒子用于显示滚动条(虚拟盒子的高度/宽度要根据总数据的条数和每条子元素的大小来确定)

2. 虚拟的盒子要根据可视区的盒子进行定位,不然会把实际渲染内容挤到最下面去

3. 实际渲染的盒子需要使用translate3d属性确定它距离顶部的位置

4. 根据可视区盒子的滚动距离来动态切割渲染的数据

具体实现:(复制可用)






 

你可能感兴趣的:(Vue,虚拟滚动,JS)