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

      虽然是标题是《vue实现列表自动滚动的方式》，但其它前端框架应该也可以通过这种方式实现，本案例中没有使用任何第三方插件，全部使用vue中相关的js、css以及定时器方式实现。

      解决问题的第一步不是找代码，而是分析问题。列表自动滚动常见方式有两种（上下左右的滚动不赘述，只是方向的问题，本案例以向上自动滚动为例）：（1）匀速滚动   （2）有间隔的平滑滚动。本案例先给出匀速滚动的方案。

     这篇文章是原创，代码是项目中自己编写的，所以运行肯定没有问题。

     要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的感觉。然后需要考虑列表衔接的问题，列表再长也有尽头，需要考虑滚动到最后一条数据出现时的问题。

     我给出的方案是，在列表的末尾拼接一个同样内容的列表，形成长度为原列表两倍的列表（如果考虑性能问题，在原列表后拼接上原列表的前几条数据就可以，具体几条根据滚动可视范围内的最大完整数据条数而定，具体往下看就明白了），然后当拼接列表滚动到可视范围内的内容和初始状态一致时（即拼接列表的上半段的最后一条记录向上滚动至完全消失时），将拼接列表向上滚动的距离归零，即可在视觉上给人一种匀速向上，且无限循环的感觉。

     先上定时器这块方法的代码。

//根据列表长度是否超过可视范围内能够显示的最大完整数据条数，来控制列表是否需要滚动
tableActionFun() {
      this.tableListSize = this.tableList.length;
      //下面的visibleSize是可视范围内能够显示的最大完整数据条数
      if (this.tableListSize > this.visibleSize) {
        this.tableList = this.tableList.concat(this.tableList);
        this.tableTimerFun();  //列表滚动方法
      } else {
        this.fillTableList();  //无需滚动时的数据填充方法，如果没必要，可以删掉
      }
},

//列表滚动方法
tableTimerFun() {
      var count = 0;
      this.tableTimer = setInterval(() => {
        if (count < (this.tableList.length / 2) * this.lineHeight) {
          this.tableTop -= 1;
          count++;
        } else {
          count = 0;
          this.tableTop = 0;
        }
      }, this.tableTimerInterval);
},

      上面的代码段中提到了可视范围内能够显示的最大完整数据条数 visibleSize，直接上案例里的截图，一看就明白了。截图中可以看到第一条数据和最后一条数据并没有完全显示，因为他们超出父容器的部分被 overflow: hidden 了，所以案例中的 visibleSize = 6. 

     所以本案例是通过列表不断上移，父容器隐藏超出部分来实现列表自动迅速滚动的。讲解的过程中可能有遗漏，直接上完整代码，重要部分都写了注释。下面的代码直接粘贴运行不会运行成功，因为下面的完整代码涉及接口调用，但所有功能已经一步到位，希望在看的你能通过注释更多地去理解，而不是简单地复制粘贴。希望能对你有所帮助。

      最后是效果视频。

     下一篇文章将讲解有间隔的平滑滚动如何实现，虽然同样会使用到定时器，但会更多的使用到css的一些功能。

     大家若有什么疑问或者有其它想法可以在评论区留言，我会尽量解答和回复的。