vue+j简单的实现轮播效果,滚动公告,衔接

//html
<div class="list" :style="{top:listTop+'px'}">
...
</div>

//data
listTop:0;

setInterval(()=>{
    this.listTop-=1;
},20)

//data
list:[1111,2222,3333],
listTop：0,

//methods  
//假设我设置了每个元素的高度为40px;
setInterval(()=>{
    this.listTop-=1;
    if(this.listTop===40){
        this.list.push(this.list.splice(0,1)[0]);//删除数组第一个元素，插入到数组后面
        this.listTop=0;//重置top
    }
},20)

//data
list:[1111,2222,3333],
listTop：0,

//methods  
//假设我设置了每个元素的高度为40px;
setScroll(){
    var t = setInterval(()=>{
        this.listTop-=1;
        if(this.listTop===-40){
            this.list.push(this.list.splice(0,1)[0]);//删除数组第一个元素，插入到数组后面
            this.listTop=0;//重置top
            clearInterval(t);//取消定时器
            //设置一个2秒后执行的定时器,重新开启滚动
            setTimeout(()=>{
                this.setScroll();
            },2000)
        }
    },20)
}

//html
<div class="box">
    <div class="list" :style="{top:listTop+'px'}">
        <div v-for="(item,index) in list" :key="index">
        {{item}}
        </div>
    </div>
</div>

//css
.box{
    height:40px;
    line-height:40px;
    overflow:hidden;
    position:relative;
}
.list{
    position:absolute;
    left:0;
}

//js
data(){
    return {
        list:[1111,2222,3333],
        listTop：0,
    }
},
mounted(){
    this.setScroll();
},
methods:{
    setScroll(){
        var t = setInterval(()=>{
            this.listTop-=1;
            if(this.listTop===-40){
                this.list.push(this.list.splice(0,1)[0]);//删除数组第一个元素，插入到数组后面
                this.listTop=0;//重置top
                clearInterval(t);//取消定时器
                //设置一个2秒后执行的定时器,重新开启滚动
                setTimeout(()=>{
                    this.setScroll();
                },2000)
            }
        },20)
    }
}