结合“康熙选秀”,给大家讲讲“虚拟列表”

觉得我讲得好的,请帮忙点个赞,谢谢你们了。嘻嘻

场景

康熙选妃

结合“康熙选秀”,给大家讲讲“虚拟列表”_第1张图片

结合“康熙选秀”,给大家讲讲“虚拟列表”_第2张图片

话说这年是康熙五十三年,天下太平,天下无人不感叹这“康熙盛世”啊,康熙自己也是开心的不得了啊,“朕奋斗了大半辈子,还不能享乐享乐,传命张廷玉来见我,我有事要让他办!”
  • 康熙:衡臣啊(衡臣是张廷玉的字),这康熙盛世如何
  • 张廷玉:皇上牛逼,皇上牛逼,皇上万岁
  • 康熙:但是朕老了啊,但是朕不能服老,朕要证明给天下人看
  • 张廷玉:皇上正值壮年,万岁万万岁
  • 康熙:我不管,我要选妃,我要选妃,我要选妃!!!
  • 张廷玉:我tm。。。你tm都60了还选?你扛得住吗?大哥!
  • 康熙: 我不管,你给我去找,找一万个妙龄女子进宫,我要选妃
  • 张廷玉:选个毛,你顶不动的- 康熙:我不管,我有鹿血,鹿血一杯,法力无边
  • 张廷玉:不,你不行。
  • 康熙:你去不去?
  • 张廷玉:不去
  • 康熙: 你去不去
  • 张廷玉:我不去
  • 康熙:还想不想配享太庙了?
  • 张廷玉:皇上万岁,臣一定上的圣托

    一个月后,一万名妙龄女子进宫了。但是难题又来了。这么多女子,不可能一次性让康熙选吧,那不得花了他的眼睛。
张廷玉灵机一动:可以让 女子们分批进 大殿让皇上选嘛。具体可以这么做:
  • 在皇上选妃的大殿外,再设置两个偏殿
  • 宫女们分批次进大殿让皇上看
  • 被看过的宫女们进左偏殿等待选妃结果,还没排到的宫女在右偏殿等待

    这样既提高了选秀效率,又可以让皇上更轻松些。这样做的好处就是:
  • 皇上不需要一次性看一万个宫女,不用那么劳累
  • 皇上如果选到一半累了,也可以休息,隔天再选,反正选到第几批了,这些都已经记录下了
  • 皇上如果某一天回想起哪个宫女还不错,也可以往回查

多数据渲染

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

虚拟列表的概念

虚拟滚动,就是根据 容器可视区域列表容积数量,监听用户滑动或滚动事件,动态截取 长列表数据中的 部分数据渲染到页面上,动态使用空白站位填充容器 上下滚动区域内容,模拟实现 原生滚动效果
结合“康熙选秀”,给大家讲讲“虚拟列表”_第3张图片
  • 浏览器渲染===康熙选秀:一次性渲染10000个肯定会使浏览器压力大,造成用户体验差
  • 容器可视区域===选秀大殿:10000个排队去渲染,比如一次渲染10个
  • 上方下方区域===左右偏殿:轮不到你渲染,你就乖乖进空白区待着

实现

基本实现

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





结语!

我是林三心,一个热心的前端菜鸟程序员。如果你上进,喜欢前端,想学习前端,那咱们可以交朋友,一起摸鱼哈哈,摸鱼群,加我请备注【思否】

image.png

你可能感兴趣的