<div class="home-list">
<div v-for="item in events" :key="item.id" ref="contlist" :class="{'animate-up':animateUp}" @mouseenter="Stop()" @mouseleave="Up()">
<div class="home-content">
<div class="home-event">
<span class="div-style-left">事件:</span>
<span>{{ item.type }}</span>
</div>
<div class="home-time">
<span class="div-style-left">時間:</span>
<span>{{ item.time }}</span>
</div>
<el-button type="text" class="home-view" @click="eventView(item)">查看</el-button>
</div>
</div>
</div>
上面是模板的內容,實時告警很多消息的話,就需要實現告警消息無縫滾動的效果了
.animate-up {
transition: all 0.5s ease-in-out;
transform: translateY(-40px);
}
滾動動畫樣式
// 控制動畫
animateUp: false,
// 計時器
intNum: null,
// 內容
events: [
{
id: 1,
type: '異常停車',
name: '測試',
time: '2020-06-15 09:22:15',
status: 2,
imgUrl1: ''
},
{
id: 2,
type: '環境衛生',
name: '測試',
time: '2020-06-16 10:22:15',
status: 3,
imgUrl1: ''
},
{
id: 3,
type: '拋灑物',
name: '測試',
time: '2020-06-17 11:22:15',
status: 3,
imgUrl1: ''
},
{
id: 4,
type: '交通擁堵',
name: '測試',
time: '2020-06-18 12:22:15',
status: 1,
imgUrl1: ''
}
]
這上面是data初始化的一些基本數據
mounted() {
this.ScrollUp()
},
destroyed() {
clearInterval(this.intNum)
},
methods: {
ScrollUp() {
this.intNum = setInterval(() => {
this.animateUp = true// 向上滾動的時候需要添加css3過渡動畫
setTimeout(() => {
this.events.push(this.events[0])// 將數組的第一個元素添加到數組的
this.events.shift() // 刪除數組的第一個元素
this.animateUp = false
}, 500)
}, 1000)
},
// 鼠標移上去停止
Stop() {
clearInterval(this.intNum)
},
// 鼠標離開繼續滾動
Up() {
this.ScrollUp()
}
}
上面是實現無縫滾動,和鼠標移入內容停止滾動,鼠標移開繼續上次的內容滾動顯示的方法
這是我實現的效果圖示
如果沒有鼠標移入移出的需求的話,把上面的方法改成下面的這種;data初始化的intNum: null變爲timer: null就好了
mounted() {
this.timer = setInterval(() => {
this.scrollAnimate()
}, 1000)
},
scrollAnimate() {
this.animateUp = true
setTimeout(() => {
this.events.push(this.events[0])
this.events.shift()
this.animateUp = false
}, 500)
},
這樣子vue實現消息無縫滾動就成功了★,°:.☆( ̄▽ ̄)/$:.°★ 。