觉得我讲得好的，请帮忙点个赞，谢谢你们了。嘻嘻场景 康熙选妃
文章图片
文章图片
话说这年是康熙五十三年，天下太平，天下无人不感叹这“康熙盛世”啊，康熙自己也是开心的不得了啊，“朕奋斗了大半辈子，还不能享乐享乐，传命张廷玉来见我，我有事要让他办！”
- 康熙：衡臣啊（衡臣是张廷玉的字），这康熙盛世如何
- 张廷玉：皇上牛逼，皇上牛逼，皇上万岁
- 康熙：但是朕老了啊，但是朕不能服老，朕要证明给天下人看
- 张廷玉：皇上正值壮年，万岁万万岁
- 康熙：我不管，我要选妃，我要选妃，我要选妃！！！
- 张廷玉：我tm。。。你tm都60了还选？你扛得住吗？大哥！
- 康熙： 我不管，你给我去找，找一万个妙龄女子进宫，我要选妃
- 张廷玉：选个毛，你顶不动的- 康熙：我不管，我有鹿血，鹿血一杯，法力无边
- 张廷玉：不，你不行。
- 康熙：你去不去？
- 张廷玉：不去
- 康熙： 你去不去
- 张廷玉：我不去
- 康熙：还想不想配享太庙了？
- 张廷玉：皇上万岁，臣一定上的圣托
一个月后，一万名妙龄女子进宫了。但是难题又来了。这么多女子，不可能一次性让康熙选吧，那不得花了他的眼睛。
张廷玉灵机一动：可以让女子们分批进大殿让皇上选嘛。具体可以这么做：
- 在皇上选妃的
大殿外，再设置两个偏殿 - 宫女们分批次进大殿让皇上看
- 被看过的宫女们进左偏殿等待选妃结果，还没排到的宫女在右偏殿等待
这样既提高了选秀效率，又可以让皇上更轻松些。这样做的好处就是：
- 皇上不需要一次性看一万个宫女，不用那么劳累
- 皇上如果选到一半累了，也可以休息，隔天再选，反正选到第几批了，这些都已经记录下了
- 皇上如果某一天回想起哪个宫女还不错，也可以往回查
现在解决多数据渲染，相信大家可能会想到分页，触底加载，懒加载等等，但其实
虚拟列表也是多数据高性能加载的一个重要解决方案。
虚拟列表的概念
虚拟滚动，就是根据容器可视区域的列表容积数量，监听用户滑动或滚动事件，动态截取长列表数据中的部分数据渲染到页面上，动态使用空白站位填充容器上下滚动区域内容，模拟实现原生滚动效果
文章图片
- 浏览器渲染===康熙选秀：一次性渲染10000个肯定会使浏览器压力大，造成用户体验差
- 容器可视区域===选秀大殿：10000个排队去渲染，比如一次渲染10个
- 上方下方区域===左右偏殿：轮不到你渲染，你就乖乖进空白区待着
- 可视区域的高度
- 列表项的高度
- 可视区域能展示的列表项个数 = ~~(可视区域高度 / 列表项高度) + 2
- 开始索引
- 结束索引
- 预加载（防止滚动过快，造成暂时白屏）
- 根据开始索引和结束索引，截取数据展示在可视区域
- 滚动节流
- 上下空白区使用padding实现
- 滑动到底，再次请求数据并拼接
{{ item.msg }}
文章图片
.v-scroll {
height: 100%;
/* padding-bottom: 500px;
*/
overflow: auto;
.scroll-item {
height: 148px;
/* width: 100%;
*/
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
img {
height: 100%;
}
}
}
结语！ 我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】
【结合“康熙选秀”，给大家讲讲“虚拟列表”】
文章图片
