vue滚动循环播放上万条信息

前言

最近在做一个新冠疫情相关的项目，其中包括一个针对高危人员进行预警的功能。
简单来说就是前端向后端一次性获取最近一个时段的所有高危人员信息，并以滚动循环播放的形式展示这些信息。
滚动循环功能并不难实现，只需要编写一个控制容器scrollTop的定时器即可。
难点在于，一个时段的高危人员信息多达上万条，如果直接将它们渲染到页面上，必然会造成浏览器的卡顿甚至崩溃。
好在在内存中保存这些信息并没有什么压力，所以我们可以通过循环地截取部分信息，再进行展示来实现这一功能。
如果不想在内存中保存所有信息，也可以参考本文思路通过调用接口来获取信息片段，这种情况下你可能需要考虑接口异常所带来的的影响。

一、滚动循环播放组件

首先准备仅包含基本功能的滚动循环播放组件AutoScroll.vue：

该组件接收一个height以确定父元素的高度
该组件的模板包括最外层的outer容器及其2个子节点inner1与inner2。其中inner1包含一个插槽，供组件使用者传入需要滚动展示的内容。inner2会在inner1的高度超过outer容器高度时，保存inner1内容的副本，以实现视觉上的无缝循环。

二、思路

将传入inner1的内容拆分成两部分：inner1A和inner1B。各部分的高度都不小于可视区域的高度。
inner2 为 inner1 的副本，同理。

图1

每当滚动至图1位置时，可以更新inner1B部分的内容，inner2B也会相应改变。
当 inner2A 的顶部部与容器顶部重合时，会归位到 图1 的状态

图2

同理，每当滚动至图2位置时，可以更新inner1A部分的内容，inner2A也会相应改变。
章节一中的AutoScroll组件会在容器滚动至inner1一半高度和归位时分别触发half和complete事件，可以在这两个事件触发时更新非可视区域的内容。

三、最终实现

fakeItems.js

export default (count = 0) => {
  const items = [];
  for (let i = 0; i < count; i++) {
    items.push({
      seq: i + 1,
      // ... 其他字段
    });
  }
  return items;
};

如果不想将完整数据保存在内存中，可在 complete 和 half 事件触发时分别异步请求 partB 和 partA 的数据