vue+定时器实现滚动列表动效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+定时器实现滚动列表动效相关的知识，希望对你有一定的参考价值。
参考技术A 利用vue+定时器实现一个竖排列表每条滚动的效果，废话不多说，先上动效1.我们设置一个定时器，没过一段时间使盒子中的ul整体上移一个li的高度，因此需要改变ul的margin-top样式，我们先设置一个状态为动画开关和一个数据列表。
2.给我们需要加动画的列表设置动态样式，当开关animate为true时改变margin-top的值。
5.我们为组件设置完成动画需要的样式
4.接下来我们封装一个方法showMarquee，在创建dom节点每两秒调用一次该函数，由于列表过短会导致动效不好看，所以在调用定时器之前可以对数组长度进行判断，自行修改。函数体为在调用之后先让ul上移，过500毫秒之后执行一次动画停止，在停止期间操作数据列表，将列表第一项push给列表最后一项，再删除第一项，保证列表可以循环滚动。
在获取列表之后调用即可
如果需要直接复制粘贴整体思路即可，样式列表能根据需求而定，亲测好用！！
以上是关于vue+定时器实现滚动列表动效的主要内容，如果未能解决你的问题，请参考以下文章
Echart动效系列01——循环切换数据以实现图表的动态效果
Echart动效系列01——循环切换数据以实现图表的动态效果