vue实现文字内容无缝向上滚动，鼠标移入停止滚动，鼠标移开继续滚动

<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实现消息无缝滚动就成功了★,°:.☆(￣▽￣)/$:.°★ 。

---