本篇文章为大家展示了利用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; /* 容器高度 */
}上述内容就是利用vue怎么实现一个滚动效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
