vue 实现数据滚动显示_vue滚动循环播放上万条信息

前言

最近在做一个新冠疫情相关的项目，其中包括一个针对高危人员进行预警的功能。

简单来说就是前端向后端一次性获取最近一个时段的所有高危人员信息，并以滚动循环播放的形式展示这些信息。

滚动循环功能并不难实现，只需要编写一个控制容器scrollTop的定时器即可。

难点在于，一个时段的高危人员信息多达上万条，如果直接将它们渲染到页面上，必然会造成浏览器的卡顿甚至崩溃。

好在在内存中保存这些信息并没有什么压力，所以我们可以通过循环地截取部分信息，再进行展示来实现这一功能。

如果不想在内存中保存所有信息，也可以参考本文思路通过调用接口来获取信息片段，这种情况下你可能需要考虑接口异常所带来的的影响。

一、滚动循环播放组件

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

export default {

props: {

// 设定容器高度

height: {

type: Number,

default: 0

}

},

mounted() {

this.getDomRef();

this.tryScroll();

},

updated() {

this.tryScroll();

},

methods: {

// 将dom元素的引用绑定到this上

getDomRef() {

this.outer = this.$el;

t