vue实现广告栏上下滚动效果     入画浅相思   这篇文章主要介绍了vue实现广告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码，供大家参考，具体内容如下

html部分

 div 
 img src="xxx.jpg" alt / 
 ul : 
 li v-for="(item, index) in msg" :key="index" 
 span 
 span {{item.name}}抢得商品{{item.goods}} /span 
 span 已有123人申请 /span 
 /span 
 /li 
 /ul 
 /div 

js部分

data () {
 return {
 msg: [
 name: '张**',
 goods: '牙膏'
 name: '王**',
 goods: '牙刷'
 name: '钟**',
 goods: '肥皂'
 animate: false,
 setInTime:'' // 定时器
mounted:{
 this.setInTime = setInterval(this.showMarquee, 3000)
destroyed () {
 clearInterval(this.setInTime) // 页面销毁时清除定时器
methods:{
 // 滚动栏滚动
 showMarquee () {
 this.animate = true
 setTimeout(() = {
 this.msg.push(this.msg[0])
 this.msg.shift()
 this.animate = false
 }, 500)
}

关键css部分

 .marquee_top {
 transition: all 0.5s;
 margin-top: -26px; /* 容器高度 */
 }

效果：

（图中有个地方直接改变内容的为gif图片首尾相接部分）

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