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 Pagination entfällt. Dies sorgt für ein reibungsloses Erlebnis bei Listen, Feeds und datenintensiven Ansichten, indem Inhalte nur bei Bedarf geladen werden.

Wenn Benutzer das Ende von scrollbar-Inhalten 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 auf dem Weg 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 abzurufen, 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 Auslösungen zu verhindern. Nach dem Setzen als abgeschlossen, denken Sie daran, update() aufzurufen, um den neuen Zustand anzuwenden:

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

Dies deaktiviert das weitere Verhalten des unendlichen Scrollens.

Setzen des Ladeflags zurück

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

Anpassung des Ladeindikators​

Standardmäßig zeigt InfiniteScroll einen integrierten Ladeindikator - 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 Datensätze 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 durch Ihr eigenes Markup vollständig ersetzen möchten, können Sie Inhalte direkt in den speziellen Inhaltsbereich mit addToContent() hinzufügen.

Wenn Sie den Inhaltsbereich füllen, ersetzt dies das standardmäßige Lade-Layout vollständig.

Code anzeigen

Stil​

Loading...