vue怎样完成广告消息上下滚动的功能？
发布时间：2022-01-20 15:53:35 所属栏目：语言 来源：互联网
导读：有时候我们在一些网站上会看到，广告栏消息有上下滚动的展示效果，那么这个功能是怎样实现的呢？这篇文章就给大家分享使用vue实现广告消息上下滚动的功能，实现代码和效果如下： html部分 div class=roll img src=xxx.jpg alt / ul :class={marquee_top:anim
|
有时候我们在一些网站上会看到，广告栏消息有上下滚动的展示效果，那么这个功能是怎样实现的呢？这篇文章就给大家分享使用vue实现广告消息上下滚动的功能，实现代码和效果如下： html部分 <div class="roll"> <img src="xxx.jpg" alt /> <ul :class="{marquee_top:animate}"> <li v-for="(item, index) in msg" :key="index"> <span class="txtWrap"> <span class="txt">{{item.name}}抢得商品{{item.goods}}</span> <span class="txt">已有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; /* 容器高度 */ } （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
