vue怎么实现无限消息无缝滚动(vue,开发技术)

一、html

<divclass="table_box"><divclass="table_title"><divclass="table_title_item">告警时间</div><divclass="table_title_item">所属集中器</div><divclass="table_title_item">内容</div></div><divclass="table_content"><div:class="{anim:animate}"@mouseenter="Stop()"@mouseleave="Up()"><divclass="table_item"v-for="(item,index)inchart4":key="index"><divclass="table_colum":title="item.wtime">{{item.wtime}}</div><divclass="table_colum":title="item.terminalName">{{item.terminalName}}</div><divclass="table_colum2":title="item.remark">{{item.remark}}</div></div></div></div></div>

二、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:all0.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

<script>exportdefault{data(){return{//告警滚动部分chart4:[],animate:false,intNum:undefined}},created(){this.getAlarmDatas()},methods:{//获取报警数据getAlarmDatas(){getAlarmInfo().then(res=>{if(res.code===1&&res.data.length>0){this.chart4=res.datathis.ScrollUp()}})},/**告警滚动部分*/ScrollUp(){//每次滚动时先清除上次定时器this.Stop()letthat=thisthis.intNum=setInterval(function(){that.animate=true//向上滚动的时候需要添加css3过渡动画setTimeout(()=>{that.chart4.push(that.chart4[0])//将数组的第一个元素添加到数组的that.chart4.shift()//删除数组的第一个元素that.animate=false},500)},2000)},//鼠标移上去停止Stop(){clearInterval(this.intNum)},//鼠标移出Up(){this.ScrollUp()}}}</script>

四、效果