vue 上下滚动的菜单_vue实现广告栏上下滚动效果

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

html部分

• {{item.name}}抢得商品{{item.goods}}

  已有123人申请

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图片首尾相接部分)

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