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 lorsque cela est nécessaire.

Lorsque les utilisateurs atteignent le bas du contenu déroulant, InfiniteScroll déclenche un événement pour charger plus de données. Pendant le chargement du nouveau contenu, il affiche un Spinner avec un texte personnalisable pour indiquer que d'autres éléments arrivent.

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. À 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 terminé pour empêcher d'autres déclenchements. Après avoir défini 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 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 de 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'Icon affichée pendant le chargement en utilisant setIcon().

Afficher le code

Personnalisation complète​

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

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

Afficher le code

Style​

Loading...