vue中使用虚拟滚动加载

• 👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
• 🌈擅长领域：前端开发
• 🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
• 🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

虚拟滚动加载是使一定数量的dom可见，这样就能减少dom节点，当页面滚动时动态的加载可见dom，所以虽然你看见的节点都不一样，但其实就只有你看到的就那么几个。

1.要想容器里有滚动条出现，条件是外面的内容的高度低于里面的内容的高度，这是个先决条件。

2.假如容器的总高度为400px，放了10个元素，每个元素40px，假如总共有10000条数据，那么这些元素的总高度为(40 * 10000)px。

3.进行滚动事件的判断，首先获取滚动的距离e.target.scrollTop，因为每个元素40px，所以可以计算出滚动到哪个元素了，start = 距离/40；有了开始的元素，那么怎么算结尾的元素呢？因为每次展示有limit限制，所以end = start + limit，最后运用数组的slice动态截取元素。

4.看似做完了，当你滚动到了某个位置，然而那个位置却是空白？？？

原因是自己忘记让元素改变位置，滚动后元素的translateY应为你滚动的距离。

<div id="app" @scroll="handleScroll">