vue怎么實現無限消息無縫滾動

本篇內容主要講解“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" >內容</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>

四、效果

到此，相信大家對“vue怎么實現無限消息無縫滾動”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！