vue实现列表自动滚动的方式（二）

        接上一章的内容继续讲，本次的主题是用vue实现列表有间隔的平滑滚动。

        那么按照惯例，我们还是先来分析问题。还是以向上滚动举例，每隔三秒列表滚动一行。先不考虑平滑的问题，如果只是让列表每隔三秒向上滚动一行，这其实很简单，各位也猜到了，按我的习惯，还是用定时器来解决。

        设置定时器，每三秒，让列表向上移动一行的高度，然后当最后一条数据出现时，在下一个三秒后，恢复到初始状态。

        下面是上面描述的代码实现：

    tableTimerFun() {
      var count = 0;  //每滚动一次，count加1
      //tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
      if (this.tableList.length > this.maxCanSee) {  
        this.tableTimer = setInterval(() => {
          //如果还没滚动到最后一条数据，则列表向上移动以上的高度
          if (count < this.tableList.length - this.maxCanSee) { 
            this.tableTop -= this.tableLineHeight;   //tableLineHeight代表列表中一行的高度
            count++;   //每滚动一次，count加1
          } else {   //如果滚动到最后一条，则恢复初始状态
            count = 0;
            this.tableTop = 0;
          }
        }, 3000);
      }
    },

        上面的内容已经实现了列表间隔一段时间滚动，接下来就是解决平滑的问题。这次我们不像上一章一样让列表每隔0.1s向上滚动1个像素，用高频位移创造平滑移动的视觉效果。这次我们直接用css来处理。

        css中有个非常好用的动态样式写法 transition，它可以让其渲染的对象在位置、尺寸等发生变化时，平滑的变化。所以我们直接让列表的容器获得以下样式：

transition: all 0.5s;

        偷懒可以直接写all，如果你有特定的需求或者只让某种样式平滑变化，还是去看官方文档，这里我不多说明。0.5s就是变化的时间。

        至此，用vue实现列表有间隔的平滑滚动其实已经实现了，但还有瑕疵，就是当最后一条数据出现，然后重置初始状态时，列表会快速滚动到列表头部。其实也不难理解，按上面的写法，正常情况都是向上移动一行的高度，而最后一条重置到初始状态时却移动了接近整个列表的高度。所以这个过程中会看到列表快速滚动。说是瑕疵但也不是瑕疵，看具体需求。有解决方案，这个放到下一篇文章讲。

        剩下的其实就是做数据大屏的开发要考虑数据不足的情况，举个例子，可视范围内列表最多现实6条，但调接口只显示了3条，这时候列表其实时不需要滚动的，这个放到以后讲，但是下面的完整代码中有，有兴趣的可以提前了解一下。

        下面是完整代码，还是那句话：下面的代码直接粘贴运行不会运行成功，因为下面的完整代码涉及接口调用，但所有功能已经一步到位，希望在看的你能通过注释更多地去理解，而不是简单地复制粘贴。希望能对你有所帮助。

        最后是效果视频：