利用vue怎么实现一个滚动效果

本篇文章为大家展示了利用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怎么实现一个滚动效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。