export default {
data() {
return {
animate:false,
items:[
{name:"馬云"},
{name:"雷軍"},
{name:"王勤"}
]
}
},
created(){
//定時器
setInterval(this.scroll,1000)
},
methods: {
scroll(){
this.animate=true; // 因為在消息向上滾動的時候需要添加css3過渡動畫,所以這里需要設置true
setTimeout(()=>{ // 這里直接使用了es6的箭頭函數,省去了處理this指向偏移問題,代碼也比之前簡化了很多
this.items.push(this.items[0]); // 將數組的第一個元素添加到數組的
this.items.shift(); //刪除數組的第一個元素
this.animate=false; // margin-top 為0 的時候取消過渡動畫,實現無縫滾動
},500)
}
}
呃....html代碼就自己寫吧