Vueはリストのシームレスなスクロールを実装します

<テンプレート>
  <div id="box" class="wrapper">
    <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}">
      <リスト
        v-for="(item,index) in cloudList"
        :key="インデックス"
        :listData="アイテム"
        :index="インデックス"
        :date="日付"
      </リスト>
    </div>
  </div>
</テンプレート>

<スタイルスコープ>
.ラッパー{
  幅：96vw;
  高さ：90vh;
  位置: 絶対;
  左：2vw;
  上: 1rem;
  オーバーフロー: 非表示;
}
.contain > div:nth-child(2n) { //このスタイルはプロジェクトに必須であり、シームレススクロールとは関係ありません。Margin-left: 2vw は無視できます。
}
.アニメーション{
  遷移: すべて 0.5 秒;
  上マージン: -7vh;
}
</スタイル>

<スクリプト>
'./List' からリストをインポートします。
エクスポートデフォルト{
  名前: '含む'、
  データ （） {
    戻る {
      cloudList: [], //リストデータを格納する配列 date: '', //最新のデータ更新日 animate: false,
      time: 3000, //時間指定スクロール間隔 setTimeout1: null,
      setInterval1: ヌル
    };
  },
  コンポーネント:
    リスト
  },
  メソッド: {
    // jsonデータを取得し、日付を更新します getCloudListData () {
      _this は定数です。
      _this.$api.getCloudListData().then(res => {
        _this.cloudList = res;
      });
      var newDate = 新しいDate();
      _this.date = _this.dateFtt('yyyy-MM-dd hh:mm:ss', 新しい日付);
    },
    // 日付形式 dateFtt (fmt, date) {
      var o = {
        'M+': date.getMonth() + 1, // 月 'd+': date.getDate(), // 日 'h+': date.getHours(), // 時間 'm+': date.getMinutes(), // 分 's+': date.getSeconds(), // 秒 'q+': Math.floor((date.getMonth() + 3) / 3), // 四半期 S: date.getMilliseconds() // ミリ秒 };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          正規表現$1、
          (date.getFullYear() + '').substr(4 - 正規表現.$1.length)
        );
      }
      (var k in o) {
        if (新しい正規表現('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
            正規表現$1、
            正規表現$1.長さ === 1
              ？ わかりました]
              : ('00' + o[k]).substr(('' + o[k]).length)
          );
        }
      }
      fmt を返します。
    },
    // スクロール scroll() {
      _this は定数です。
      _this.animate = true;
      タイムアウトをクリアします(_this.setTimeout1);
      _this.setTimeout1 = setTimeout(() => {
        var 親 = document.getElementById('con1');
        var first = document.getElementById('con1').children[0];
        var second = document.getElementById('con1').children[1];
        親.removeChild(最初の子);
        親.removeChild(2番目);
        親.appendChild(最初の子);
        親.appendChild(2番目);
        _this.animate = false;
      }, 500);
    }
  },
  作成された（）{
    _this は定数です。
    _this.getCloudListData();
    //タイマーは24時間ごとにデータを更新します setInterval(() => {
      _this.getCloudListData();
    }, 24 * 60 * 60 * 1000);
  },
  マウントされた（）{
    _this は定数です。
    var contain = document.getElementById('box');
    _this.setInterval1 = setInterval(_this.scroll, _this.time);
    var setInterval2 = null;
    //マウスがスクロールエリアに移動してスクロールを停止します。contain.onmouseenter = function () {
      間隔をクリアします(_this.setInterval1);
      var カウント = 0;
      // マウスが10秒以上動かない場合はスクロールを開始する setInterval2 = setInterval(function () {
        カウント++;
        （カウント === 10）の場合{
          _this.scroll();
          _this.setInterval1 = setInterval(_this.scroll, _this.time);
        }
      }, 1000);
      //マウスが動くとすぐにスクロールを停止し、カウントを 0 に設定します
      contain.onmousemove = 関数（）{
        カウント = 0;
        間隔をクリアします(_this.setInterval1);
      };
    };
    // マウスがスクロール領域から外れた contain.onmouseleave = function () {
      間隔をクリアします(間隔2を設定します);
      間隔をクリアします(_this.setInterval1);
      _this.scroll();
      _this.setInterval1 = setInterval(_this.scroll, _this.time);
    };
  }
};
</スクリプト>