Défilement pratiquement infini avec Angular

Le défilement infini existe depuis un certain temps. L'idée de base : lorsque vous faites défiler, le nouveau contenu se charge en bas, créant un défilement apparemment sans fin. La mise en œuvre est simple, mais sans une planification minutieuse, les performances en pâtissent. Après quelques récupérations de contenu, vous pourriez avoir des centaines d'éléments DOM, dont beaucoup sont invisibles. Heureusement, il existe des modèles pour atténuer cela, et nous en explorerons un en utilisant Angular.

C'est ce que nous voulons éviter.

Défilement virtuel

Le défilement virtuel n'affiche qu'un sous-ensemble d'une grande liste à tout moment, à la différence du défilement infini. Il est idéal pour les grands ensembles de données où le rendu de tout en même temps est inefficace. Seuls les éléments visibles (et quasi-visibles) sont rendus ; au fur et à mesure que l'utilisateur fait défiler, les éléments sont échangés dynamiquement. Cela réduit considérablement les éléments DOM, améliorant ainsi les performances.

Le défilement virtuel fonctionne en créant un conteneur correspondant à la hauteur de la fenêtre d'affichage. Seuls les éléments visibles (plus un tampon) sont rendus dans ce conteneur à une profondeur de défilement spécifique, gérée via CSS. Le défilement met à jour le conteneur, affichant les nouveaux éléments et supprimant ceux hors de vue, en ajustant la profondeur de défilement. La combinaison de cela avec un défilement infini crée une liste pratiquement infinie sans pénalités de performances.

L'exemple ci-dessous montre une liste de milliers d'éléments, mais en affiche un maximum de 8 à la fois. Le défilement ajuste la hauteur de défilement CSS, créant l'illusion d'une liste beaucoup plus longue.

Exemple concret

Créons une application angulaire récupérant les médias à partir de l'API paginée de Reddit et l'affichant dans une liste déroulante virtuelle. Il comprendra une barre de recherche pour la sélection de subreddit et un filtre. Faire défiler vers le bas charge plus de contenu. Nos principales exigences :

1. Piloté par RxJS Observables et le tube asynchrone.
2. Réinitialise le contenu lors des modifications de subreddit ou de filtre, mais pas lors de l'ajout de nouveau contenu.
3. Stocke le contenu précédent en mémoire pour un défilement fluide vers le haut/bas sans appels d'API redondants.

Nous utiliserons le package @angular/cdk (contenant le composant Virtual Scroller). Installez-le avec npm i @angular/cdk.

Bien que cet exemple utilise Angular, des modèles similaires sont applicables à React, Vue ou Vanilla JavaScript. Une démo de base illustrant les principes sous-jacents est disponible ici.

Configuration du service

Tout d'abord, nous créons un service pour récupérer le contenu de l'API Reddit à l'aide des HttpClient d'Angular et des observables RxJS pour gérer le nom et le filtre du sous-reddit. (Certains codes sont omis par souci de concision ; l'implémentation complète se trouve ici).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

La méthode de récupération de contenu suit des propriétés spécifiques lors des requêtes de données. Une propriété page est ajoutée à la chaîne de requête pour garantir que le nouveau contenu est récupéré après le dernier élément. Nous filtrons également le contenu NSFW et les éléments dépourvus d'indice de publication. Cela garantit que seul le contenu attendu est affiché.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

L'observable query$ (précédemment omis) fusionne différents flux observables avant de récupérer le contenu. L'opérateur scan combine les résultats du flux précédent et actuel, créant ainsi un vaste tableau de données sur plusieurs pages.

Cela permet un défilement étendu ; seuls les changements de nom de subreddit ou de filtre déclenchent une récupération complète. nextPage, une propriété de query$, stocke le dernier ID d'élément de l'ensemble actuel, utilisé pour déterminer quelle page récupérer ensuite lorsque l'on approche du bas du défilement virtuel.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

La puissance de RxJS réside dans la combinaison et la manipulation de flux de données. Cela nous permet de gérer la logique métier avant qu'elle n'atteigne le composant, gardant le composant plus propre et réutilisable.

Configuration des composants

Ensuite, nous configurons le composant pour afficher le contenu à l'aide de CdkVirtualScrollViewport d'Angular. Une méthode gère le défilement près du bas de la fenêtre, récupérant la page suivante via l'observable subRedditPage$.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Le modèle utilise le canal asynchrone pour s'abonner à query$. Remarque : Les scrollers virtuels deviennent plus complexes avec du contenu à hauteur variable ; des hauteurs d'articles cohérentes sont recommandées pour les performances.

<code class="language-html">// ... (Omitted for brevity) ...</code>

La méthode onScroll récupère plus de contenu lorsque l'utilisateur s'approche du bas. Il utilise l'ID nextPage (de query$) et émet vers subRedditPage$, déclenchant le prochain appel API et mettant à jour la liste via query$.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

La barre de recherche et les contrôles des onglets sont également intégrés (exemple simplifié ci-dessous).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

Conclusion

Cela crée un scroller pratiquement infini. Vous pouvez le tester ici. L'API de Reddit a des limites de débit ; vous pourriez les heurter pendant les tests. Pour plus de détails, y compris des fonctionnalités supplémentaires, consultez le référentiel GitHub ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!