vue实现无限消息无缝滚动

本文实例为大家分享了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>

四、效果

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