视频直播app源码，vue实现列表自动滚动的方式

视频直播app源码，vue实现列表自动滚动的方式

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

 

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

 

1

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

​

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

 以上就是 视频直播app源码，vue实现列表自动滚动的方式，更多内容欢迎关注之后的文章