vue实现新闻轮播滚动
2019-12-23 本文已影响0人
undefined汪少
div 部分
遍历循环
<Col v-for="(item, index) inmarqueeList" :class="{marquee_top:animate}">
</Col>
style部分
/*新闻轮播滚动*/
.marquee_top {
transition:all 0.5s;
}
js部分
data（）{
//控制动效是否开启
animate:false,
marqueeList:[],}
methods（）{
//轮播文字
showMarquee(){
this.animate =true;
setTimeout (() => {
this.marqueeList.push (
this.marqueeList[0 ]
);
this.marqueeList.shift ();
this.animate =false;
}, 500);
},
}
created(){
//开启轮播文字
setInterval (this.showMarquee, 2000)
},
