Ionic - 8.14 Le virtual scrolling pour les longues listes
Lorsqu'une liste contient beaucoup d'éléments, les afficher tous d'un coup peut ralentir l'application. Le virtual scrolling n'affiche que les éléments visibles. Notre liste reste courte, donc la différence n'est pas visible, mais la syntaxe reste utile pour une application appelée à grandir.
Remplacer la liste par ion-virtual-scroll
Dans la page de découverte, on remplace la liste classique par le composant ion-virtual-scroll, et l'on retire la directive ngFor qui affichait tous les éléments.
L'attribut items reçoit le tableau des lieux. La directive *virtualItem remplace la boucle et donne un nom à l'élément courant, ici place, pour garder accès aux données de chaque lieu.
Limiter les données de démonstration
Pour la démonstration, la liste de lieux est limitée à dix éléments lors de l'initialisation de la page. Le contenu reste correct, même si la différence n'est pas visible avec peu d'éléments.
La variable place fonctionne donc toujours comme avant, avec les nouvelles lignes du composant.
Donner une hauteur approximative
Pour optimiser le calcul, on indique la hauteur approximative d'un élément. Dans l'inspecteur du navigateur, un élément de liste mesure environ 71 pixels.
On ajoute donc l'attribut approxItemHeight avec une valeur de 70 pixels dans ion-virtual-scroll. Ionic utilise cette estimation pour savoir quand générer les prochains éléments à l'écran.
En résumé
ion-virtual-scroll n'affiche que les éléments utiles, et la directive *virtualItem donne accès à chaque élément. Une hauteur approximative de 70 pixels aide le composant à calculer le défilement. L'intérêt se voit surtout avec de très longues listes.
Points clés
- Le virtual scrolling n'affiche que les éléments visibles ou proches.
- ion-virtual-scroll reçoit le tableau par l'attribut items.
- La directive *virtualItem donne un nom à chaque élément de la boucle.
- Une hauteur approximative, ici 70 pixels, aide le calcul du défilement.
- L'intérêt apparaît surtout avec de longues listes.
Questions fréquentes
Faut-il toujours utiliser le virtual scrolling ?
Non. Pour une petite liste, la différence n'est pas visible. Il devient utile quand la liste grandit beaucoup.
Que faire si la hauteur des éléments change ?
La vidéo ne traite pas ce cas. Il faut vérifier la documentation officielle d'Ionic avant de fixer une valeur.
Où trouver la documentation du virtual scroll ?
Dans la documentation officielle d'Ionic, à la catégorie consacrée aux listes.