vue实现数据无缝循环滚动

通过定时器控制数据的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.realData.shift()
        this.realData.shift()
        this.marginTop = 0
      }
    },
  }
  <style>
  .realData{
        height:57px;
        margin:0 0 20px 30px;
        font-size:12px;
        overflow: hidden;
        ul{
          height:100%;
          color:#fff;
          li:nth-child(odd){
            color:#d48265;
          }
        }
      }
  </style>