1 分析问题，确定方案
由于最终效果需要是一个长列表的形式，那么常规的分页渲染，显然是不符合要求的。这个时候我们可以考虑用虚拟列表来实现需求。本篇文章的重点就是和大家分享一下虚拟列表的概念，优势，以及实现思路。
2 什么是虚拟列表
虚拟列表就是只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。
3 实现思路
（1）写一个代表可视区域的div，固定其高度，通过overflow使其允许纵向 Y 轴滚动。
（2）第二步，计算区域中可以显示的数据条数。这个可以用可视区域的高度除以单条数据高度得到。
（3）监听滚动，当滚动条变化时，计算出被卷起的数据的高度。
（4）计算区域内数据的起始索引，也就是区域内的第一条数据：这个用卷起的高度除以单条数据高度可以拿到。
（5）计算区域内数据的结束索引。通过起始索引+可显示的数据的条数可以拿到。
（6）取起始索引和结束索引中间的数据，渲染到可视区域。
（7）计算起始索引对应的数据在整个列表中的偏移位置并设置到列表上。
整个步骤下来，最终的效果是：不论怎么滚动，我们改变的只是滚动条的高度和可视区的元素内容。每次只会渲染一个固定的条数，不会增加多余元素。
4 一个小demo
这里给大家写了一个基础的demo，可以复制粘贴到vue项目中运行，有兴趣的同学可以在此基础上进行优化，比如监听滚动时防抖节流的优化。
另外咱们这里是默认每条数据等高，实际情况中也会有数据高度不同的情况，这个也需要另外处理。
demo代码如下：
