vue实现数据无缝循环滚动_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.rea
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24