结合康熙选秀讲解vue虚拟列表实现_vue.js_

场景

康熙选妃

话说这年是康熙五十三年，天下太平，天下无人不感叹这“康熙盛世”啊，康熙自己也是开心的不得了啊，“朕奋斗了大半辈子，还不能享乐享乐，传命张廷玉来见我，我有事要让他办！”

• 康熙：衡臣啊（衡臣是张廷玉的字），这康熙盛世如何
• 张廷玉：皇上牛逼，皇上牛逼，皇上万岁
• 康熙：但是朕老了啊，但是朕不能服老，朕要证明给天下人看
• 张廷玉：皇上正值壮年，万岁万万岁
• 康熙：我不管，我要选妃，我要选妃，我要选妃！！！
• 张廷玉：我tm。。。你tm都60了还选？你扛得住吗？大哥！
• 康熙： 我不管，你给我去找，找一万个妙龄女子进宫，我要选妃
• 张廷玉：选个毛，你顶不动的- 康熙：我不管，我有鹿血，鹿血一杯，法力无边
• 张廷玉：不，你不行。
• 康熙：你去不去？
• 张廷玉：不去
• 康熙： 你去不去
• 张廷玉：我不去
• 康熙：还想不想配享太庙了？
• 张廷玉：皇上万岁，臣一定上的圣托

一个月后，一万名妙龄女子进宫了。但是难题又来了。这么多女子，不可能一次性让康熙选吧，那不得花了他的眼睛。

张廷玉灵机一动：可以让女子们分批进大殿让皇上选嘛。具体可以这么做：

• 在皇上选妃的大殿外，再设置两个偏殿
• 宫女们分批次进大殿让皇上看
• 被看过的宫女们进左偏殿等待选妃结果，还没排到的宫女在右偏殿等待

这样既提高了选秀效率，又可以让皇上更轻松些。这样做的好处就是：

• 皇上不需要一次性看一万个宫女，不用那么劳累
• 皇上如果选到一半累了，也可以休息，隔天再选，反正选到第几批了，这些都已经记录下了
• 皇上如果某一天回想起哪个宫女还不错，也可以往回查

多数据渲染

现在解决多数据渲染，相信大家可能会想到分页，触底加载，懒加载等等，但其实虚拟列表也是多数据高性能加载的一个重要解决方案。

虚拟列表的概念

虚拟滚动，就是根据容器可视区域的列表容积数量，监听用户滑动或滚动事件，动态截取长列表数据中的部分数据渲染到页面上，动态使用空白站位填充容器上下滚动区域内容，模拟实现原生滚动效果

• 浏览器渲染===康熙选秀：一次性渲染10000个肯定会使浏览器压力大，造成用户体验差
• 容器可视区域===选秀大殿：10000个排队去渲染，比如一次渲染10个
• 上方下方区域===左右偏殿：轮不到你渲染，你就乖乖进空白区待着

实现

基本实现

• 可视区域的高度
• 列表项的高度
• 可视区域能展示的列表项个数 = ~~(可视区域高度 / 列表项高度) + 2
• 开始索引
• 结束索引
• 预加载（防止滚动过快，造成暂时白屏）
• 根据开始索引和结束索引，截取数据展示在可视区域
• 滚动节流
• 上下空白区使用padding实现
• 滑动到底，再次请求数据并拼接

以上就是结合康熙选秀讲解vue虚拟列表的详细内容，更多关于vue虚拟列表的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！