通过定时器控制数据的margin-top实现数据滚动,滚动到一定位置时将数组的前几条数据push进数组,同时把这几条数据删除
废话不说了,上代码
<div class="realData">
<ul :style="{'marginTop':marginTop+'px'}">
<li v-for="(item,index) in realData" :key='index'>{
{item}}</li>
</ul>
</div>
data(){
return{
marginTop:0, // 数据的margin-top
realData:['第一条数据','第二条数据','第三条数据','第四条数据','第五条数据','第六条数据',],
timer:'' // 定时器
}
}
created(){
this.timer= setInterval(this.showNotice, 100) //100表示间隔时间,数字越大滚得越快
},
methods:{
// 数据循环滚动
showNotice(){
this.marginTop -= 1
if(this.marginTop < -36){ // 滚上去36px后把前两条数据拉下来
this.realData.push(this.realData[0])
this.realData.push(this.realData[1]) // 因为项目要求数据一条白一条黄,所以两条两条循环
this.rea