虚拟滚动实现原理

前言

当界面dom节点需要成千上百的循环渲染时，就会导致界面卡顿，但是往往界面上可视化界面的空间完全不需要一次性渲染这么多dom，就用到了这里的虚拟滚动。如果你使用的是uniapp,那么小编已经集成好了全平台虚拟滚动+列表切换

具体场景：

像下拉框数据过多、滚动加载（虽然滚动一次数据少，但是有的列表滚动多了需要卡片和列表切换导致dom需要重新渲染）都会造成性能问题。

实现原理：

1. 假设我们的数组有1000条数据，会对它进行循环渲染，arr = [1,2,3,...1000]
2. 我的界面也就展示4个，为了连贯性我一次性slice 6条数据，显示4条，备用2条，showData = arr.slice(0,6)
3. 此时你的界面只有6条数据，初始化完成，但是滚动条显示还是不正确的。设计上采用以下结构

<!--父级视图窗口，通常是屏幕的一个固定高度-->
<div> 
	<!--内容虚拟的总高度（通常是item dom*item.length，如果是下图的两列即item*item.length/2）-->
	<div> 
		<!--真实slice渲染的数据dom-->
		<div> 
			...
		</div>
	</div>
</div>

4. 到这里，很好理解，因为可视区域下的内容虚拟高度被撑开，因此虚拟滚动条与实际渲染的滚动条是保持一致的。目前还有点小问题，那就是我们渲染的6条数据上滑去就没了。如下图第二个步骤所示
5. 当滑到下图第二步时，我们根据监听滚动条应该将showData = arr.slice(2,8),同时，将可视内容区域往下位移一个列表的距离，transform: translateY(单条数据的高度);，即第四个图的样子

tip:

1. 如何判断单行数据划出时机？
   let startIndex = Math.floor(scrollTop / 单条数据的高度) * 一行几列;
2. 如何计算位移的距离？
   let offsetY = scrollTop - (scrollTop % 单条数据的高度);