制作一个可以定时滚动的数据列表

之前写过一篇文章，只不过是点击使列表滚动，思路大概是计算出移动的距离，然后点击时间设置一个定时器，规定几毫秒移动几个像素，移动像素使改变的滚动条的scrollTop。

但是定时器多了就会出现各种各样的问题。于是进行以下优化。⬇

想要让滚动条自动滚动，还是需要定时器，比如5s一滚，滚动多少。

然后滚动用设置定位dom的top，加上动画效果，比手动用js生硬的实现动画效果好得多，且不吃性能。

红框是视图可见的区域，所以要加overflow:auto

黄色的框包裹住里面的内容，所以不写高度，但是要给个定位，后面操作top就是这里的top

绿色的框就是循环出来的列表

<div ref="column" style="position:absolute;width:44%;transition: all 1s ease-in-out 1s;"
        :style="{ top: tops + 'px' }">
    <!-- 黄框 -->
</div>

mounted() {
    let len = this.data.length - 5
    //一页显示五条，一次滚动一条
    if (len >= 1) {
      this.timer = setInterval(() => {
        this.times++
        this.next()
        if (this.times > len) {
            //如果滚动到头了，就回滚到头
          this.times = 0
          this.back()
        }
      }, 5000)
    }
  },
  methods: {
    next() {
        //一次滚动1/5
      this.tops -= this.height * 0.2
    },
    back() {
      this.tops = 0
    }
}

结合自己的项目就可以了。