vue怎么实现无限消息无缝滚动

本篇内容主要讲解"vue怎么实现无限消息无缝滚动"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么实现无限消息无缝滚动"吧!

一、html

   
    
告警时间
    
所属集中器
    
内容
   
   
   
    
     
{{item.wtime}}
     
{{item.terminalName}}
     
{{item.remark}}
   
   
   

二、style

.table_box{    padding:10px;}.table_title_item{    width:30%;    height:28px;    color:#fff;    color:#01C0C3;    font-size: 14px;    line-height: 28px;    text-align: center;}.table_content{    margin:5px;    height:28vh;    overflow: hidden;}.table_item{    width:100%;    // 设定行高    height:30px;    line-height: 30px;    display: flex;    color:#01C0C3;    font-size:14px;}.anim{    // 设定滚动    transition: all 0.5s;    margin-top: -30px;//高度等于行高}.table_colum{    width:30%;    text-align: center;    // 多出部分省略    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 1; //行数    -webkit-box-orient: vertical;}.table_colum2{    width:40%;    text-align: center;    // 多出部分省略    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 1; //行数    -webkit-box-orient: vertical;}

三、js

四、效果

到此，相信大家对"vue怎么实现无限消息无缝滚动"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！