Effizientes virtuelles Scrollen mit Vue.js implementieren

Einführung

In diesem Projekt lernen Sie, wie Sie eine virtuelle Scrollliste mit Vue.js implementieren. Virtuelles Scrollen ist eine Technik, die nur den sichtbaren Bereich eines großen Datensatzes rendert, anstatt die Daten im nicht sichtbaren Bereich vollständig oder teilweise zu rendern. Dies ermöglicht eine extrem hohe Renderleistung und eignet sich für die Darstellung einer großen Anzahl von Daten mit geringem Speicherbedarf.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie Daten asynchron mithilfe der axios-Bibliothek laden und rendern
• Wie Sie die Funktion des virtuellen Scrollens implementieren, um nur die sichtbaren Listenelemente zu rendern
• Wie Sie die Start- und Endindizes der sichtbaren Listenelemente basierend auf der aktuellen Scrollposition berechnen
• Wie Sie die Renderleistung optimieren, indem Sie einen Puffer verwenden, um zusätzliche Listenelemente außerhalb des sichtbaren Bereichs zu rendern

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

• Die Funktion des virtuellen Scrollens implementieren, um die Renderleistung zu verbessern
• Daten asynchron in einer Vue.js-Komponente laden und rendern
• Die sichtbaren Listenelemente basierend auf der aktuellen Scrollposition berechnen
• Einen Puffer verwenden, um ein weißer Bildschirm während des Scrollens zu vermeiden

Projektstruktur einrichten

In diesem Schritt lernen Sie die Projektstruktur und die Dateien kennen, die für die Anmeldefunktion relevant sind.

Die Projektverzeichnisstruktur sieht wie folgt aus:

Der Anfangscode für diese Aufgabe wurde bereits bereitgestellt. Öffnen Sie die Programmierumgebung, und die Verzeichnisstruktur ist wie folgt:

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

Hierbei:

• js/axios.min.js ist die axios-Anfragelibrary-Datei.
• js/vue.min.js und js/http-vue-loader.js sind Vue.js-Bibliothek-verwandte Dateien.
• data.json ist die Daten-Datei, die angefordert werden soll.
• index.html ist die Hauptseite.
• virtual-scroll-list.vue ist die Komponentendatei, die vervollständigt werden muss.

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Öffnen Sie als Nächstes "Web 8080" oben auf der VM und aktualisieren Sie die Seite manuell. Dann sehen Sie die Seite. Der anfängliche Effekt ist ein leerer Listenkasten.

Asynchrones Datenladen und Rendern

In diesem Schritt lernen Sie, wie Sie Daten asynchron mithilfe der axios-Bibliothek laden und rendern.

1. Öffnen Sie die Datei virtual-scroll-list.vue.
2. Im mounted()-Lebenszyklushaken verwenden Sie axios, um eine Anfrage an die Datei data.json zu stellen und die list-Daten zu befüllen:

mounted() {
  // TODO: Completion of data requests
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // calculate the total height
  });
}

Dadurch werden die Daten aus der Datei data.json abgerufen und in der list-Daten-Eigenschaft gespeichert. Die totalHeight-Eigenschaft wird ebenfalls basierend auf der Länge der list und der itemHeight berechnet.

Nach Abschluss dieses Schritts sollte die Anfangsliste mit den aus der Datei data.json geladenen Daten gerendert werden.

Implementierung des virtuellen Scrollens

In diesem Schritt lernen Sie, wie Sie die Funktion des virtuellen Scrollens implementieren.

1. Öffnen Sie die Datei virtual-scroll-list.vue.
2. Implementieren Sie den scroll-Ereignishandler:

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

Der scroll-Ereignishandler berechnet den start-Index der sichtbaren Listenelemente basierend auf der aktuellen Scrollposition.

Nach Abschluss dieses Schritts sollte die Funktion des virtuellen Scrollens implementiert sein, und die Listenelemente sollten nur gerendert werden, wenn sie im sichtbaren Bereich (Viewport) sind. Der endgültige Effekt ist in der folgenden Abbildung dargestellt.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Übungen absolvieren, um Ihre Fähigkeiten zu verbessern.