用vue实现一个虚拟列表

上次分享了超长列表分片加载的方式，这种方式现在一般不会使用，因为dom会变的无比庞大，页面会很卡，今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些。

思路就是用vue的for循环渲染列表，自己手动加一个滚动条，然后通过监听scroll，算出应该显示到第几个，通过计算属性截取显示的数据，直接上代码：

    
    
    



    

        

        

            
{{val}}
        
    

看效果：

其实原理很简单，把代码跑起来，输出看看这些数据就很容易就搞懂虚拟列表的实现了。但这只是实现，要想做的更好就很难了。比如可以前后多添加几条数据，像swiper样，然后滚动的过程加一些小的过渡动画，让页面滑动过程柔顺一些，还有，做个节流还是很有必要的。要是想做高度不固定的，那就更难了，要缓存每个列表的高度，然后用一些算法去计算滚动过程的高度。