Beim Erstellen von Angular stoßen wir manchmal auf die Notwendigkeit, Daten mithilfe der Technik des unendlichen Bildlaufs anzuzeigen, dh kontinuierlich Daten zu laden, während der Benutzer die Seite nach unten scrollt.

Seit die Intersection Observer API zu Browsern hinzugefügt wurde, war das Erstellen einer wiederverwendbaren Infinite Scroll-Komponente noch nie einfacher. Lassen Sie uns lernen, wie wir eine solche Komponente mit dieser API erstellen können.

Beachten Sie, dass wir nicht in die Intersection Observer API eintauchen werden, also wenn Sie nicht damit vertraut sind, empfehle ich, diesen Artikel vorher zu lesen.

Das Hauptkonzept besteht darin, ein beobachtbares Element am Ende einer Liste der angezeigten Elemente zu platzieren, um weitere Daten hinzuzufügen, wenn der Benutzer das Ende dieser Liste erreicht.

Wir wollen es so flexibel wie möglich machen, also lassen wir unsere Verbraucher jede Vorlage, die sie wollen, mit ng-content . Darunter fügen wir ein Ankerelement hinzu, das als Zielelement dient, das wir beobachten.

Erstellen wir den Schnittpunktbeobachter:

Zuerst erstellen wir einen neuen IntersectionObserver der entries als Argument erhält. Diese Funktion wird immer dann aufgerufen, wenn das beobachtete Element in das Ansichtsfenster eintritt.

Wir können den Sichtbarkeitsstatus des Elements überprüfen, indem wir uns die isIntersection -Eigenschaft ansehen. Wenn isIntersecting true ist, ist das Zielelement mindestens so sichtbar wie der Schwellenwert, der überschritten wurde. Der Standardschwellenwert ist 0, dh sobald auch nur ein Pixel sichtbar ist, wird der Rückruf ausgeführt.

Als nächstes rufen wir die observe() -Methode auf und übergeben ihr das Ankerelement. Dies wird die Beobachtung dieses Elements initiieren.

🦊 Scrollbare Container unterstützen

Die Eigenschaft root gibt das Element an, das als Ansichtsfenster zum Überprüfen der Sichtbarkeit des Ziels verwendet wird. Wenn es auf null gesetzt ist, wird standardmäßig das Browser-Ansichtsfenster verwendet.

Es gibt Zeiten, in denen wir einen scrollbaren Container benötigen, und dann möchten wir, dass dieser Container als root Element fungiert. Lassen Sie uns diese Funktionalität unterstützen:

Wir fügen eine Überprüfung hinzu, um zu sehen, ob das aktuelle Host-Element ein scrollbarer Container ist. Wenn ja, setzen wir es als root Element.

Schließlich wollen wir keine Speicherlecks in unserer Anwendung, also trennen wir den Beobachter, wenn die Komponente zerstört wird:

So einfach ist das.

Mal sehen, wie wir es verwenden:

Oder mit einem scrollbaren Container:

Browserunterstützung

Die Intersection Observer API funktioniert in den meisten gängigen Browsern. Wenn Sie alte Browser wie IE unterstützen müssen, können Sie zur Laufzeit ein Polyfill oder einen Fallback auf das Scroll-Ereignis laden.

🚀 Hast du schon Akita probiert?

Akita, eine der führenden State-Management-Bibliotheken, wurde in unzähligen Produktionsumgebungen eingesetzt. Es wird ständig weiterentwickelt und verbessert.

Egal, ob es sich um Entitäten handelt, die vom Server ankommen, oder um UI-Statusdaten, Akita verfügt über benutzerdefinierte Speicher, leistungsstarke Tools und maßgeschneiderte Plugins, mit denen Sie die Daten verwalten und große Mengen an Standardcode überflüssig machen können. Wir / ich empfehle Ihnen dringend, es auszuprobieren.

Folgen Sie mir auf Medium oder Twitter, um mehr über Angular, Akita und JS zu erfahren!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.