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 die Benutzer nach unten scrollen, und beseitigt somit die Notwendigkeit für eine Seitenummerierung. Dies schafft ein nahtloses Erlebnis für Listen, Feeds und datenschwere Ansichten, indem Inhalte nur bei Bedarf geladen werden.

Wenn Benutzer das Ende des scrollbaren Inhalts erreichen, löst InfiniteScroll ein Ereignis aus, um mehr Daten zu laden. Während neue Inhalte geladen werden, wird ein Spinner mit anpassbarem Text angezeigt, um darauf hinzuweisen, dass weitere Elemente auf dem Weg sind.

Zustandsverwaltung​

Die InfiniteScroll-Komponente gibt Ereignisse aus und verwaltet ihren 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("Lade 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 das weitere Verhalten des unendlichen Scrollens.

Lade-Flag zurücksetzen

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

Anpassung des Ladeindikators​

Standardmäßig zeigt InfiniteScroll einen eingebauten Ladeindikator - einen kleinen animierten Spinner sowie den 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 abrufen...");
infiniteScroll.setText("Weitere Elemente laden...");

Ähnlich können Sie das während des Ladevorgangs angezeigte Icon mit setIcon() anpassen.

Code anzeigen

Vollständige Anpassung​

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

Wenn Sie den Inhalts-Slot befüllen, ersetzt er das standardmäßige Lade-Layout vollständig.

Code anzeigen

Gestaltung​

Loading...