影片直播app原始碼，vue實現列表自動滾動的方式

影片直播app原始碼，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來處理。

 以上就是 影片直播app原始碼，vue實現列表自動滾動的方式，更多內容歡迎關注之後的文章