vue实现列表无缝循环滚动 vue实现列表无缝循环滚动

本文实例为大家分享了vue实现列表无缝循环滚动的具体代码，供大家参考，具体内容如下
功能介绍：
在PC端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。
大致需求：
1、列表可以使用数组循环遍历；
2、每隔几秒中列表数据向上滚动一定距离，展示下一条数据；
3、滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、banner图的循环效果）；
整体思路：
1、使用两个定时器嵌套实现；
2、需要两个相同容器存放同样内容，实现无缝衔接效果；
效果展示：

完整代码：

/* 滚动表格最外层 */.tableoOut {margin: 100px auto; width: 500px; height: 400px; background: pink; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; }.tableBox {width: 100%; background: #000; overflow: hidden}.tableTit {background: #000; width: 100%; height: 40px; color: #858A84; text-align: center; display: flex; justify-content: center; align-items: center; }.tableInner {height: auto; }.box {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; color: #fff; }.box .time {color: #858A84; }.tableoOut .addr, .tableoOut .time, .tableoOut .name {box-sizing: border-box; padding: 0 5px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.tableoOut .addr {width: calc(100% - 200px); flex-shrink: 0; }.tableoOut .name, .tableoOut .time {width: 100px; flex-shrink: 0; }姓名地址入驻时间{{item}}山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省2022-05-26{{item}}山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省山东省2022-05-26

【vue实现列表无缝循环滚动】setInterval踩坑：
发现这种方法实现的定时轮播，有一阵没访问页面，会出现卡停的情况，采用下面的解决方法：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。