Overslaan naar hoofdinhoud

InfiniteScroll

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

De InfiniteScroll component in webforJ laadt automatisch meer inhoud terwijl gebruikers naar beneden scrollen, wat de noodzaak voor paginering elimineert. Dit creëert een soepele ervaring voor lijsten, feeds en datarijke weergaven door inhoud alleen te laden wanneer dat nodig is.

Wanneer gebruikers de onderkant van scrollbare inhoud bereiken, triggert InfiniteScroll een evenement voor het laden van meer gegevens. 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 behoudt een 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 je 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("Loaded item"));
  infiniteScroll.update();
});

Zodra alle inhoud is geladen, markeer je de scroll als voltooid om verdere triggers te voorkomen. Vergeet niet update() aan te roepen na het instellen van volbracht:

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

Dit schakelt het verdere gedrag van de oneindige scroll uit.

Reset het Laad Vlag

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

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("Fetching more records...");
infiniteScroll.setText("Loading more items...");

Evenzo kun je de Icon die tijdens het laden wordt weergegeven aanpassen door setIcon() te gebruiken.

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 de inhoudsslot vul, vervangt deze volledig de standaard laadindeling.

Toon Code

Stijlen​

Loading...