Overslaan naar hoofdinhoud

InfiniteScroll

Openen in ChatGPT
Schaduw dwc-infinite-scroll 25.00
Java API

De InfiniteScroll component in webforJ laadt automatisch meer inhoud als gebruikers naar beneden scrollen, waardoor paginering niet nodig is. Dit creëert een soepele ervaring voor lijsten, feeds en gegevensrijke weergaven door inhoud alleen te laden wanneer dat nodig is.

Wanneer gebruikers de onderkant van scrollbare inhoud bereiken, activeert InfiniteScroll een gebeurtenis om meer gegevens te laden. Terwijl nieuwe inhoud wordt geladen, toont het een Spinner met aanpasbare tekst om aan te geven dat er meer items onderweg zijn.

Toestandbeheer​

De InfiniteScroll component geeft evenementen af en beheert de interne toestand om te helpen beheren hoe en wanneer inhoud wordt geladen.

Toon Code

Om meer gegevens op te halen wanneer de gebruiker scrollt, gebruik de onScroll() of addScrollListener() methode om een listener te registreren. Binnen de listener laad je doorgaans extra inhoud en roep je update() aan om de toestand van InfiniteScroll te verversen.

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

Zodra alle inhoud is geladen, markeer je de scroll als voltooid om verdere triggers te voorkomen. Na het instellen van voltooid, vergeet niet om update() aan te roepen om de nieuwe toestand toe te passen:

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

Dit schakelt verder oneindig scrollgedrag uit.

Reset het Laad Vlag

Je kunt deze vlag resetten met setCompleted(false) als je later de gebruiker toestaat om meer inhoud te laden (bijv. na een verversing).

Aanpassing van de laadindicator​

Standaard toont InfiniteScroll een ingebouwde laadindicator - een kleine geanimeerde Spinner samen met een “Gegevens laden” tekst. Je kunt de weergegeven tekst wijzigen door een aangepaste boodschap door te geven aan de InfiniteScroll constructor of door setText() te gebruiken.

InfiniteScroll infiniteScroll = new InfiniteScroll("Meer records ophalen...");
infiniteScroll.setText("Meer items laden...");

Op dezelfde manier kun je het Icon dat tijdens het laden wordt weergegeven aanpassen met setIcon().

Toon Code

Volledige aanpassing​

Als je zowel de Spinner als de tekst volledig wilt vervangen door je eigen markup, kun je inhoud rechtstreeks in de speciale inhoudsslot toevoegen met addToContent().

Wanneer je het inhoudsslot vult, vervangt het volledig de standaard laadindeling.

Toon Code

Styling​

Loading...