Vue implementiert nahtloses Scrollen von Listen

<Vorlage>
  <div id="box" Klasse="Wrapper">
    <div Klasse="enthalten" id="con1" ref="con1" :class="{anim:animate==true}">
      <Liste
        v-for="(Element, Index) in CloudList"
        :Schlüssel="Index"
        :listData="Artikel"
        :index="Index"
        :Datum="Datum"
      ></Liste>
    </div>
  </div>
</Vorlage>

<Stilbereich>
.wrapper {
  Breite: 96vw;
  Höhe: 90vh;
  Position: absolut;
  links: 2vw;
  oben: 1rem;
  Überlauf: versteckt;
}
.contain > div:nth-child(2n) { //Dieser Stil ist für mein Projekt erforderlich und hat nichts mit nahtlosem Scrollen zu tun. Margin-left: 2vw kann ignoriert werden;
}
.anim {
  Übergang: alle 0,5 s;
  Rand oben: -7vh;
}
</Stil>

<Skript>
Liste aus „./List“ importieren;
Standard exportieren {
  Name: 'Enthalten',
  Daten () {
    zurückkehren {
      cloudList: [], //Array zum Speichern von Listendaten date: '', //Datum der letzten Datenaktualisierung animate: false,
      Zeit: 3000, //Zeitgesteuertes Scrollintervall setTimeout1: null,
      setInterval1: null
    };
  },
  Komponenten:
    Liste
  },
  Methoden: {
    // JSON-Daten abrufen und Datum aktualisieren getCloudListData () {
      const _this = dies;
      _this.$api.getCloudListData().then(res => {
        _this.cloudList = res;
      });
      var neuesDatum = neues Datum();
      _this.date = _this.dateFtt('yyyy-MM-dd hh:mm:ss', neues Datum);
    },
    // Datumsformat dateFtt (fmt, date) {
      var o = {
        „M+“: date.getMonth() + 1, // Monat „d+“: date.getDate(), // Tag „h+“: date.getHours(), // Stunden „m+“: date.getMinutes(), // Minuten „s+“: date.getSeconds(), // Sekunden „q+“: Math.floor((date.getMonth() + 3) / 3), // Quartal S: date.getMilliseconds() // Millisekunden };
      wenn (/(y+)/.test(fmt)) {
        fmt = fmt.ersetzen(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.Länge)
        );
      }
      für (var k in o) {
        wenn (neuer RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.ersetzen(
            RegExp.$1,
            RegExp.$1.Länge === 1
              ? OK]
              : ('00' + o[k]).substr(('' + o[k]).Länge)
          );
        }
      }
      fmt zurückgeben;
    },
    // Scrollen scroll () {
      const _this = dies;
      _this.animate = wahr;
      Zeitüberschreitung löschen(_this.setTimeout1);
      _this.setTimeout1 = setTimeout(() => {
        var übergeordnetes Element = document.getElementById('con1');
        var erste = document.getElementById('con1').children[0];
        var Sekunde = document.getElementById('con1').children[1];
        übergeordnetes Element.entfernenKind(erstes);
        parent.removeChild(Sekunde);
        übergeordnetes Element.AnhängenKind(erstes);
        parent.appendChild(Sekunde);
        _this.animate = falsch;
      }, 500);
    }
  },
  erstellt () {
    const _this = dies;
    _this.getCloudListData();
    //Der Timer aktualisiert die Daten alle 24 Stunden setInterval(() => {
      _this.getCloudListData();
    }, 24 * 60 * 60 * 1000);
  },
  montiert () {
    const _this = dies;
    var enthalten = document.getElementById('box');
    _this.setInterval1 = setInterval(_this.scroll, _this.time);
    var setInterval2 = null;
    //Maus bewegt sich in den Scrollbereich, um das Scrollen zu stoppen contain.onmouseenter = function () {
      Intervall löschen(_this.setInterval1);
      Variablenanzahl = 0;
      // Wenn sich die Maus länger als zehn Sekunden nicht bewegt, beginne mit dem Scrollen setInterval2 = setInterval(function () {
        zählen++;
        wenn (Anzahl === 10) {
          _this.scroll();
          _this.setInterval1 = setInterval(_this.scroll, _this.time);
        }
      }, 1000);
      //Stoppe das Scrollen, sobald sich die Maus bewegt und setze den Zähler auf 0
      enthalten.onmousemove = Funktion () {
        Anzahl = 0;
        Intervall löschen(_this.setInterval1);
      };
    };
    // Die Maus bewegt sich aus dem Scrollbereich contain.onmouseleave = function () {
      Intervall löschen(Intervall festlegen2);
      Intervall löschen(_this.setInterval1);
      _this.scroll();
      _this.setInterval1 = setInterval(_this.scroll, _this.time);
    };
  }
};
</Skript>