Zum Hauptinhalt springen

InfiniteScroll

ChatGPT öffnen
Shadow dwc-infinite-scroll 25.00
Java API

Die InfiniteScroll-Komponente in webforJ lädt automatisch mehr Inhalte, während Benutzer nach unten scrollen, und beseitigt so die Notwendigkeit für die Paginierung. Dies schafft ein reibungsloses Erlebnis für Listen, Feeds und datenintensive Ansichten, indem 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 neuer Inhalt geladen wird, zeigt es einen Spinner mit anpassbarem Text an, um anzuzeigen, dass weitere Elemente unterwegs sind.

Code anzeigen

Zustandsverwaltung​

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

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("Gelaadener Artikel"));
    infiniteScroll.update();
});

Sobald alle Inhalte geladen sind, markieren Sie das Scrollen als abgeschlossen, um weitere Auslösungen 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 unendliche Scrollverhalten.

Ladeflag zurücksetzen

Sie können dieses Flag mit setCompleted(false) zurücksetzen, wenn Sie später Benutzern erlauben, mehr Inhalte zu laden (z. B. nach einem Refresh).

Anpassung des Ladeanzeigen​

Standardmäßig zeigt InfiniteScroll eine eingebaute Ladeanzeige - einen kleinen animierten Spinner zusammen mit einem 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("Mehr Artikel laden...");

Ebenso können Sie das während des Ladens angezeigte Icon mithilfe von setIcon() anpassen.

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 Inhaltsbereich mit addToContent() einfügen.

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

Code anzeigen

Stil​

Loading...