什么是虚拟列表

只渲染可是区域的列表节点，滚动的时候进行数据的动态替换。

实现步骤

1. 计算出当前可视区域起始数据的索引 startIndex

2. 计算出当前可视区域结束数据的索引 endIndex

3. 计算出当前可视区域内的数据，并渲染

4. 滚动发生时，计算 startIndex 对应的数据，在整个列表的偏移位置 startOffset ，并且更新到列表上

结构设计

• 真正渲染的元素 virtual-list

• 撑开高度的元素，保证滚动 virtual-list-phantom

• 容器元素 virtual-list-container

监听滚动

监听 virtual-list-container 的滚动事件，获取滚动条到顶部的距离 scrollTop

需要准备的数据

可视区域的高度：screenHeight

列表项的高度：itemSize

列表数据：listData

当前的滚动位置：scrollTop

得出最终想要的数据

列表总高度:listHeight = itemSize * listData.length

可显示的列表项数:showedCount = Math.ceil(screenHeight / itemSize)

数据的起始索引:startIndex = Math.floor(scrollTop / itemSize)

数据的结束索引:endIndex = startIndex + showedCount

列表显示的数据:showedData = listData.slice(startIndex,endIndex)

偏移量（列表数据的第一个数据到现在开头数据的索引的差值）startOffset = scrollTop - (scrollTop % itemSize)

最终代码

Github