vue实现列表无缝循环滚动

本文实例为大家分享了vue实现列表无缝循环滚动的具体代码，供大家参考，具体内容如下

功能介绍：

在PC端网页，包括大数据、官网、后台管理平台开发中，可能会用到这种列表循环滚动的展示。

大致需求：

1、列表可以使用数组循环遍历；
2、每隔几秒中列表数据向上滚动一定距离，展示下一条数据；
3、滚动到最后一条数据时重新显示第一条开始的数据（类似走马灯、banner图的循环效果）；

整体思路：

1、使用两个定时器嵌套实现；
2、需要两个相同容器存放同样内容，实现无缝衔接效果；

效果展示：

完整代码：

    
        
        
        
        
    
    
        

            

                

                    
姓名
                    
地址
                    
入驻时间
                
                

                    

                        

                            
{{item}}
                            
山东省山东省山东省山东省山东省山东省山东省山东省
                            山东省山东省山东省山东省山东省
                            
2022-05-26
                        
                    
                    

                        

                            
{{item}}
                            
山东省山东省山东省山东省山东省山东省山东省山东省
                            山东省山东省山东省山东省山东省
                            
2022-05-26
                        
                    
                
            
        
    
    

setInterval踩坑：

发现这种方法实现的定时轮播，有一阵没访问页面，会出现卡停的情况，采用下面的解决方法：

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