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 fils d'actualité et les vues riches en données en ne chargeant le contenu que lorsque cela est nécessaire.

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 charge, il affiche un Spinner avec un texte personnalisable pour indiquer que d'autres éléments sont en route.

Gestion des états​

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. À l'intérieur de l'écouteur, vous chargez généralement du contenu supplémentaire et appelez update() pour rafraîchir l'état de InfiniteScroll.

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

Une fois que tout le contenu a été chargé, marquez le défilement comme complet pour empêcher d'autres déclenchements. Après avoir défini comme complet, 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 plus tard à 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 lIcon affichée pendant le chargement en utilisant setIcon().

Afficher le code

Personnalisation totale​

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

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

Afficher le code

Style​

Loading...