Overslaan naar hoofdinhoud

InfiniteScroll

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

De InfiniteScroll component in webforJ laadt automatisch meer inhoud wanneer gebruikers naar beneden scrollen, waardoor paginering niet nodig is. 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 de scrollbare inhoud bereiken, activeert InfiniteScroll een gebeurtenis 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.

Toestandsbeheer​

De InfiniteScroll component genereert evenementen en houdt interne status bij om te helpen bij het beheren van 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 InfiniteScroll status te vernieuwen.

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

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

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

Dit schakelt verder oneindig scrollen uit.

Reset de 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 laadindicator​

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

InfiniteScroll infiniteScroll = new InfiniteScroll("Bezig met het ophalen van meer records...");
infiniteScroll.setText("Bezig met het laden van meer items...");

Op een vergelijkbare 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 inhoudslot toevoegen met addToContent().

Wanneer je de inhoudslot vuldt, vervangt het de standaard laadlay-out volledig.

Toon Code

Stijl​

Loading...