vue實現(xiàn)無限消息無縫滾動

更新時間：2022年04月08日 11:43:42 作者：過往深處少年藍

這篇文章主要為大家詳細介紹了vue實現(xiàn)無限消息無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)無限消息無縫滾動的具體代碼，供大家參考，具體內(nèi)容如下

一、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%">內(nèi)容</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; //行數(shù)
? ? -webkit-box-orient: vertical;
}
.table_colum2{
? ? width:40%;
? ? text-align: center;
? ? // 多出部分省略
? ? overflow: hidden;
? ? text-overflow: ellipsis;
? ? display: -webkit-box;
? ? -webkit-line-clamp: 1; //行數(shù)
? ? -webkit-box-orient: vertical;
}

三、js

<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 告警滾動部分
? ? ? ? ? ? chart4: [],
? ? ? ? ? ? animate: false,
? ? ? ? ? ? intNum: undefined
? ? ? ? }
? ? },
? ? created() {
? ? ? ? this.getAlarmDatas()
? ? },
? ? methods: {
? ? ? ? // 獲取報警數(shù)據(jù)
? ? ? ? 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]) // 將數(shù)組的第一個元素添加到數(shù)組的
? ? ? ? ? ? ? ? ? ? that.chart4.shift() // 刪除數(shù)組的第一個元素
? ? ? ? ? ? ? ? ? ? that.animate = false
? ? ? ? ? ? ? ? }, 500)
? ? ? ? ? ? }, 2000)
? ? ? ? },
? ? ? ? // 鼠標移上去停止
? ? ? ? Stop() {
? ? ? ? ? ? clearInterval(this.intNum)
? ? ? ? },
? ? ? ? // 鼠標移出
? ? ? ? Up() {
? ? ? ? ? ? this.ScrollUp()
? ? ? ? }
? ? }
}
</script>

四、效果