本文实例为大家分享了vue实现无限消息无缝滚动的具体代码,供大家参考,具体内容如下
一、html
<div class="table_box"> <div class="table_title"> <div class="table_title_item">告警时间</div> <div class="table_title_item">所属集中器</div> <div class="table_title_item" style="width:40%">内容</div> </div> <div class="table_content"> <div :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()"> <div class="table_item" v-for="(item, index) in chart4" :key="index"> <div class="table_colum" :title="item.wtime">{{item.wtime}}</div> <div class="table_colum" :title="item.terminalName">{{item.terminalName}}</div> <div class="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: 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
<script> export default { 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.data this.ScrollUp() } }) }, /** 告警滚动部分 */ ScrollUp() { // 每次滚动时先清除上次定时器 this.Stop() let that = this this.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>
四、效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。