Nahezu unendliches Scrollen mit Angular

Unendliches Scrollen gibt es schon seit einiger Zeit. Die Grundidee: Während Sie scrollen, werden unten neue Inhalte geladen, sodass ein scheinbar endloser Scrollvorgang entsteht. Die Umsetzung ist einfach, aber ohne sorgfältige Planung leidet die Leistung. Nach ein paar erneuten Inhaltsabrufen könnten Hunderte von DOM-Elementen vorhanden sein, von denen viele unsichtbar sind. Glücklicherweise gibt es Muster, um dies zu mildern, und wir werden eines mit Angular untersuchen.

Das wollen wir vermeiden.

Virtuelles Scrollen

Virtueller Bildlauf rendert immer nur eine Teilmenge einer großen Liste – im Gegensatz zum unendlichen Bildlauf. Es ist ideal für große Datensätze, bei denen das Rendern aller Daten auf einmal ineffizient ist. Es werden nur sichtbare (und nahezu sichtbare) Elemente gerendert; Während der Benutzer scrollt, werden Elemente dynamisch ausgetauscht. Dadurch werden DOM-Elemente erheblich reduziert und die Leistung gesteigert.

Virtuelles Scrollen funktioniert durch die Erstellung eines Containers, der der Höhe des Ansichtsfensters entspricht. Nur die sichtbaren Elemente (plus ein Puffer) werden in diesem Container mit einer bestimmten Scrolltiefe gerendert, die über CSS verwaltet wird. Durch Scrollen wird der Container aktualisiert, indem neue Elemente angezeigt und aus der Ansicht entfernt werden, wobei die Scrolltiefe angepasst wird. Kombiniert man dies mit unendlichem Scrollen, entsteht eine praktisch unendliche Liste ohne Leistungseinbußen.

Das folgende Beispiel zeigt eine Liste mit Tausenden von Elementen, rendert jedoch maximal 8 auf einmal. Durch Scrollen wird die CSS-Scrollhöhe angepasst, wodurch die Illusion einer viel längeren Liste entsteht.

Beispiel aus der Praxis

Lassen Sie uns eine Angular-Anwendung erstellen, die Medien aus der paginierten API von Reddit abruft und sie in einer virtuellen Bildlaufliste anzeigt. Es enthält eine Suchleiste für die Subreddit-Auswahl und einen Filter. Wenn Sie nach unten scrollen, werden weitere Inhalte geladen. Unsere wichtigsten Anforderungen:

1. Angetrieben durch RxJS Observables und die asynchrone Pipe.
2. Setzt Inhalte bei Subreddit- oder Filteränderungen zurück, jedoch nicht beim Anhängen neuer Inhalte.
3. Speichert vorherige Inhalte im Speicher für nahtloses Scrollen nach oben/unten ohne redundante API-Aufrufe.

Wir verwenden das Paket @angular/cdk (das die Virtual Scroller-Komponente enthält). Installieren Sie es mit npm i @angular/cdk.

Während dieses Beispiel Angular verwendet, sind ähnliche Muster auf React, Vue oder Vanilla JavaScript anwendbar. Eine grundlegende Demo, die die zugrunde liegenden Prinzipien veranschaulicht, ist hier verfügbar.

Service-Setup

Zuerst erstellen wir einen Dienst zum Abrufen von Inhalten aus der Reddit-API mithilfe von Angulars HttpClient und RxJS Observables, um den Subreddit-Namen und -Filter zu verwalten. (Der Kürze halber wurde ein Teil des Codes weggelassen; die vollständige Implementierung finden Sie hier).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Die Methode zum Abrufen von Inhalten verfolgt bestimmte Eigenschaften während Datenanforderungen. Der Abfragezeichenfolge wird eine page-Eigenschaft hinzugefügt, um sicherzustellen, dass nach dem letzten Element neuer Inhalt abgerufen wird. Wir filtern auch NSFW-Inhalte und Artikel heraus, denen ein Beitragshinweis fehlt. Dadurch wird sichergestellt, dass nur erwartete Inhalte angezeigt werden.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Das query$ Observable (zuvor weggelassen) führt verschiedene Observable-Streams zusammen, bevor Inhalte abgerufen werden. Der scan-Operator kombiniert frühere und aktuelle Stream-Ergebnisse und erstellt so ein großes Datenarray über mehrere Seiten.

Dies ermöglicht ein umfangreiches Scrollen; Nur Subreddit-Namen oder Filteränderungen lösen einen vollständigen erneuten Abruf aus. nextPage, eine Eigenschaft von query$, speichert die letzte Element-ID im aktuellen Satz und wird verwendet, um zu bestimmen, welche Seite als nächstes abgerufen werden soll, wenn man sich dem unteren Rand des virtuellen Scrollers nähert.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Die Stärke von RxJS liegt in der Kombination und Manipulation von Datenströmen. Dadurch können wir die Geschäftslogik verwalten, bevor sie die Komponente erreicht, wodurch die Komponente sauberer und wiederverwendbar bleibt.

Komponenten-Setup

Als nächstes richten wir die Komponente so ein, dass sie Inhalte mit Angulars CdkVirtualScrollViewport anzeigt. Eine Methode übernimmt das Scrollen am unteren Rand des Ansichtsfensters und ruft die nächste Seite über das subRedditPage$ Observable.

ab

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Die Vorlage verwendet die asynchrone Pipe, um query$ zu abonnieren. Hinweis: Virtuelle Scroller werden bei Inhalten mit variabler Höhe komplexer; Für die Leistung werden einheitliche Artikelhöhen empfohlen.

<code class="language-html">// ... (Omitted for brevity) ...</code>

Die onScroll-Methode ruft mehr Inhalte ab, wenn sich der Benutzer dem Ende nähert. Es verwendet die nextPage-ID (von query$) und sendet an subRedditPage$, wodurch der nächste API-Aufruf ausgelöst und die Liste über query$ aktualisiert wird.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Die Suchleiste und die Tab-Steuerelemente sind ebenfalls integriert (vereinfachtes Beispiel unten).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Fazit

Dadurch entsteht ein praktisch unendlicher Scroller. Sie können es hier testen. Für die API von Reddit gelten Ratenbeschränkungen. Sie könnten sie während des Tests treffen. Weitere Details, einschließlich zusätzlicher Funktionen, finden Sie im GitHub-Repository hier.

Das obige ist der detaillierte Inhalt vonNahezu unendliches Scrollen mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!