Zum Hauptinhalt springen

InfiniteScroll

In ChatGPT öffnen
Schatten dwc-infinite-scroll 25.00
Java API

Die InfiniteScroll-Komponente in webforJ lädt automatisch mehr Inhalte, während Benutzer nach unten scrollen, wodurch die Notwendigkeit von Seitenumbrüchen entfällt. Dies sorgt für ein flüssiges Erlebnis bei Listen, Feeds und datenintensiven Ansichten, da Inhalte nur bei Bedarf geladen werden.

Wenn Benutzer den unteren Rand des scrollbaren Inhalts erreichen, löst InfiniteScroll ein Ereignis zum Laden weiterer Daten aus. Während neue Inhalte geladen werden, wird ein Spinner mit anpassbarem Text angezeigt, um anzuzeigen, dass weitere Elemente unterwegs sind.

Zustandsverwaltung​

Die InfiniteScroll-Komponente gibt Ereignisse aus und verwaltet den internen Zustand, um zu helfen, wie und wann Inhalte geladen werden.

Code anzeigen

Um mehr Daten zu laden, wenn der Benutzer scrollt, verwenden Sie die Methode onScroll() oder addScrollListener(), um einen Listener zu registrieren. Innerhalb des Listeners laden Sie typischerweise zusätzliche Inhalte und rufen update() auf, um den Zustand von InfiniteScroll zu aktualisieren.

infiniteScroll.onScroll(event -> {
  infiniteScroll.add(new Paragraph("Geladenes Element"));
  infiniteScroll.update();
});

Sobald alle Inhalte geladen wurden, markieren Sie das Scrollen als abgeschlossen, um weitere Trigger zu verhindern. Nach dem Setzen auf abgeschlossen, denken Sie daran, update() aufzurufen, um den neuen Zustand anzuwenden:

infiniteScroll.setCompleted(true);
infiniteScroll.update();

Dies deaktiviert weiteres unendliches Scrollverhalten.

Ladeflag zurücksetzen

Sie können dieses Flag zurücksetzen, indem Sie setCompleted(false) verwenden, wenn Sie später dem Benutzer ermöglichen, mehr Inhalte zu laden (z. B. nach einer Aktualisierung).

Anpassung des Ladeanzeigers​

Standardmäßig zeigt InfiniteScroll einen eingebauten Ladeanzeiger - einen kleinen animierten Spinner zusammen mit dem Text „Daten werden geladen“. Sie können den angezeigten Text ändern, indem Sie eine benutzerdefinierte Nachricht an den Konstruktor von InfiniteScroll übergeben oder setText() verwenden.

InfiniteScroll infiniteScroll = new InfiniteScroll("Weitere Aufzeichnungen werden abgerufen...");
infiniteScroll.setText("Weitere Elemente werden geladen...");

Ebenso können Sie das während des Ladevorgangs angezeigte Icon anpassen, indem Sie setIcon() verwenden.

Code anzeigen

Vollständige Anpassung​

Wenn Sie sowohl den Spinner als auch den Text vollständig durch Ihr eigenes Markup ersetzen möchten, können Sie Inhalte direkt in den speziellen Inhaltsplatzhalter mit addToContent() einfügen.

Wenn Sie den Inhaltsplatz füllen, ersetzt er das Standard-Lade-Layout vollständig.

Code anzeigen

Gestaltung​

Loading...