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

四、效果

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