--- highlight: a11y-dark --- ![demo.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64056d641

一、背景： $\color {#000eac} {同事忙飞了，叫我帮忙写个大屏列表滚动效果}$，正好我也有点空，就去了解下requestAnimationFrame的原理，简单学了下，写了一个案例给他

前言 在做数据大屏开发的过程中，经常出现需要对列表进行自动滚动的需求，为了个性化的实现各种需求，就封装了一个函数方法

前言 从毕业之后，自己就一直在做TOC的业务比较多，网站、H5、小程序等。 自从回到了二线城市，发现二线做自己产品的公司少之又少，而做政府或者企业的业务偏多，也就是数据可视化大屏，数字孪生类的业务较多

背景 做了一周大屏开发，也是在近期全部完成。借此记录一下大屏的整体适配处理以及列表自动循环滚动播放动画的处理实现。

数据可视化大屏幕列表滚动动画的可视化封装（内含即用代码片段）。 动画采用vuejs的指令和requestAnimationFrame进行封装。