vue--公告轮播

html:

<div class="news" v-if="news.length > 0" >

　　<ul class="marquee_list" :class="{ marquee_top : animate }">

　　　　<li v-for="item in news">{{item.title}}</li>

　　</ul>

</div>

 

js:

 

export default {

　　data(){

　　　　return {

　　　　　　news:[],

　　　　　　animate:false

　　　　}

　　　},

　　mounted(){

　　　　this.showMarquee();

　　},

　　methods:{

　　　　showMarquee: function () {

　　　　　　this.animate = true;

　　　　　　setTimeout(()=>{

　　　　　　　　this.news.push(this.news[0]);

　　　　　　　　this.news.shift();

　　　　　　　　this.animate = false;

　　　　　　},500)

　　　　}

　　}

}

 

 

CSS:

 

.news {

position: relative;

overflow: hidden;

padding: 0.1rem .3rem;

height: .84rem;

box-sizing: border-box;

">#fff;

&::before{

content: "";

width: .74rem;

height: .64rem;

display: block;

overflow: hidden;

background-image: url("../images/new_icon.png");

background-position: center;

background-repeat: no-repeat;

background-size: cover;

float: left;

}

ul{

padding-left: 1.24rem;

box-sizing: border-box;

width: 100%;

li{

white-space: nowrap;

width: 100%;

text-overflow: ellipsis;

height: .64rem;

line-height: .64rem;

font-size: .3rem;

display: block;

overflow: hidden;

padding: .1rem;

}

}

}

.marquee_list{

position: absolute;

top:0px;

left: 0px;

}

.marquee_top {

transition: all 0.5s;

margin-top: -.84rem

}