本文为小伙伴们介绍的是关于vue实现列表无缝循环滚动,感兴趣的小伙伴一起来看看吧。
在PC端网页,包括大数据、官网、后台管理平台开发中,可能会用到这种列表循环滚动的展示。
1、列表可以使用数组循环遍历;
2、每隔几秒中列表数据向上滚动一定距离,展示下一条数据;
3、滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯、banner图的循环效果);
1、使用两个定时器嵌套实现;
2、需要两个相同容器存放同样内容,实现无缝衔接效果;
姓名地址入驻时间{{item}}山东省山东省山东省山东省山东省山东省山东省山东省 山东省山东省山东省山东省山东省2022-05-26{{item}}山东省山东省山东省山东省山东省山东省山东省山东省 山东省山东省山东省山东省山东省2022-05-26
setInterval踩坑:
发现这种方法实现的定时轮播,有一阵没访问页面,会出现卡停的情况,采用下面的解决方法:
以上就是关于vue实现列表无缝循环滚动的全部内容了,感兴趣的小伙伴记得点击关注哦。