Passer au contenu principal

InfiniteScroll

Ouvrir dans ChatGPT
Ombre dwc-infinite-scroll 25.00
Java API

Le composant InfiniteScroll dans webforJ charge automatiquement plus de contenu à mesure que les utilisateurs font défiler vers le bas, éliminant ainsi le besoin de pagination. Cela crée une expérience fluide pour les listes, les flux et les vues riches en données en chargeant le contenu uniquement en cas de besoin.

Lorsque les utilisateurs atteignent le bas du contenu défilable, InfiniteScroll déclenche un événement pour charger plus de données. Pendant que le nouveau contenu se charge, il affiche un Spinner avec un texte personnalisable pour indiquer qu'il y a plus d'éléments en cours de chargement.

Gestion de l'état​

Le composant InfiniteScroll émet des événements et maintient un état interne pour aider à gérer comment et quand le contenu est chargé.

Afficher le code

Pour récupérer plus de données lorsque l'utilisateur fait défiler, utilisez la méthode onScroll() ou addScrollListener() pour enregistrer un écouteur. Dans l'écouteur, vous chargez généralement du contenu supplémentaire et appelez update() pour actualiser l'état d'InfiniteScroll.

infiniteScroll.onScroll(event -> {
  infiniteScroll.add(new Paragraph("Article chargé"));
  infiniteScroll.update();
});

Une fois tout le contenu chargé, marquez le défilement comme terminé pour empêcher d'autres déclenchements. Après avoir défini comme terminé, n'oubliez pas d'appeler update() pour appliquer le nouvel état :

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

Cela désactive le comportement de défilement infini.

Réinitialiser le Drapeau de Chargement

Vous pouvez réinitialiser ce drapeau en utilisant setCompleted(false) si vous permettez ensuite à l'utilisateur de charger plus de contenu (par exemple, après un rafraîchissement).

Personnalisation de l'indicateur de chargement​

Par défaut, InfiniteScroll affiche un indicateur de chargement intégré - un petit Spinner animé accompagné d'un texte « Chargement des données ». Vous pouvez changer le texte affiché en passant un message personnalisé au constructeur InfiniteScroll ou en utilisant setText().

InfiniteScroll infiniteScroll = new InfiniteScroll("Récupération de plus d'enregistrements...");
infiniteScroll.setText("Chargement de plus d'éléments...");

De même, vous pouvez personnaliser l'Icône affichée pendant le chargement en utilisant setIcon().

Afficher le code

Personnalisation complète​

Si vous souhaitez complètement remplacer à la fois le Spinner et le texte par votre propre balisage, vous pouvez ajouter du contenu directement dans l'emplacement de contenu spécial en utilisant addToContent().

Lorsque vous remplissez l'emplacement de contenu, il remplace entièrement la mise en page de chargement par défaut.

Afficher le code

Style​

Loading...