Aller au contenu principal

InfiniteScroll

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

Le composant InfiniteScroll dans webforJ charge automatiquement plus de contenu à mesure que les utilisateurs font défiler, éliminant ainsi le besoin de pagination. Cela crée une expérience fluide pour les listes, flux et 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 est chargé, il affiche un Spinner avec un texte personnalisable pour indiquer que d'autres éléments sont en route.

Afficher le code

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é.

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 tout comportement de défilement infini ultérieur.

Réinitialiser le flag de chargement

Vous pouvez réinitialiser ce flag 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 l'Icône 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'emplacement de contenu spécial à l'aide de 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...