vue 列表无缝滚动

主要是通过定时器去设置margin-top的数据，然后动态push到数组最后面去并删除第一项

<template>
  <div>
    <div class="mian" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <div class="title">
        <span>名字</span>
        <span>性别</span>
        <span>年龄</span>
      </div>
      <div class="box">
        <div :style="{ marginTop: distance + 'px' }">
          <div class="detail" v-for="(v, i) in list" :key="i">
            <span>{{ v.name }}</span>
            <span>{{ v.six }}</span>
            <span>{{ v.age }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { json } from 'body-parser'

export default {
  data () {
    return {
      mask: 0,
      distance: 0,
      setTime: 0,
      list: [
        {
          name: '1111',
          six: '男',
          age: 14
        },
        {
          name: '2222',
          six: '女',
          age: 14
        },
        {
          name: '3333',
          six: '男',
          age: 14
        },
        {
          name: '4444',
          six: '男',
          age: 14
        },
        {
          name: '5555',
          six: '女',
          age: 14
        },
        {
          name: '6666',
          six: '女',
          age: 14
        },
        {
          name: '7777',
          six: '女',
          age: 14
        },
        {
          name: '8888',
          six: '女',
          age: 14
        },
        {
          name: '9999',
          six: '女',
          age: 14
        },
      ]
    }
  },
  created () {
    this.setTab()
  },
  methods: {
    setTab () {
      this.setTime = setInterval(() => {
        this.distance--
      }, 70)
    },
    mouseenter () {
      clearInterval(this.setTime)
    },
    mouseleave () {
      this.setTab()
    }
  },
  watch: {
    distance () {
      if (Math.abs(this.distance) > 34) {
        this.mask++
        this.distance = 0
      }
    },
    mask () {
      // console.log(, '加一')
      let obj = JSON.parse(JSON.stringify(this.list[0]))
      this.list.splice(0, 1)
      this.list.push(obj)
    }
  }
}
</script>
<style lang="less" scoped>
.mian {
  width: 400px;
  height: 200px;
}
.title {
  height: 34px;
}
.title,
.detail {
  width: 100%;
  display: flex;
  justify-content: space-around;
  span {
    display: inline-block;
    width: 33.3%;
    text-align: center;
    border: 1px solid #333;
    padding: 5px 0;
    box-sizing: border-box;
  }
}
.box {
  height: calc(200px - 34px);
  overflow: hidden;
  border: 1px solid red;
}
</style>