En construisant des SPAs, nous rencontrons parfois la nécessité d’afficher des données en utilisant la technique du défilement infini — c’est-à-dire en chargeant continuellement les données lorsque l’utilisateur fait défiler la page.

Depuis que l’API Intersection Observer a été ajoutée aux navigateurs, la construction d’un composant de défilement infini réutilisable n’a jamais été aussi facile. Apprenons comment créer un tel composant à l’aide de cette API.

Notez que nous n’allons pas plonger dans l’API Intersection Observer, donc si vous ne la connaissez pas, je vous recommande de lire cet article au préalable.

Le concept principal est de placer un élément observable à la fin d’une liste d’éléments affichés, afin d’ajouter plus de données lorsque l’utilisateur atteint le bas de cette liste.

Nous voulons le rendre aussi flexible que possible, nous laissons donc nos consommateurs passer n’importe quel modèle qu’ils veulent en utilisant ng-content. En dessous, nous ajoutons un élément d’ancrage qui servira d’élément cible que nous surveillons.

Créons l’Observateur d’intersection:

Tout d’abord, nous créons un nouveau IntersectionObserver qui reçoit entries comme argument. Cette fonction sera appelée chaque fois que l’élément observé entre dans la fenêtre d’affichage.

Nous pouvons vérifier l’état de visibilité de l’élément en regardant la propriété isIntersection. Si isIntersecting vaut true, l’élément cible est devenu au moins aussi visible que le seuil passé. Le seuil par défaut est 0, ce qui signifie que dès qu’un pixel est visible, le rappel sera exécuté.

Ensuite, nous appelons la méthode observe(), en lui passant l’élément d’ancrage. Cela initiera l’observation de cet élément.

Support Supporte les conteneurs déroulants

La propriété root indique l’élément utilisé comme fenêtre d’affichage pour vérifier la visibilité de la cible. Lorsqu’il est défini sur null, il est par défaut dans la fenêtre d’affichage du navigateur.

Il y a des moments où nous aurons besoin d’un conteneur défilant, puis nous voudrions que ce conteneur agisse comme l’élément root. Prenons en charge cette fonctionnalité:

Nous ajoutons une vérification pour voir si l’élément hôte actuel est un conteneur défilant. Si c’est le cas, nous le définissons comme l’élément root.

Enfin, nous ne voulons pas de fuites de mémoire dans notre application, nous déconnecterons donc l’observateur lorsque le composant sera détruit :

C’est aussi simple que cela.

Voyons comment nous l’utilisons :

Ou avec un conteneur à défilement :

Support du navigateur

L’API Intersection Observer fonctionne dans la plupart des principaux navigateurs. Si vous avez besoin de prendre en charge d’anciens navigateurs tels que IE, vous pouvez charger un polyfill ou un retour à l’événement de défilement lors de l’exécution.

Have Avez-Vous Déjà Essayé Akita?

L’une des principales bibliothèques de gestion d’état, Akita a été utilisée dans d’innombrables environnements de production. Il se développe et s’améliore constamment.

Qu’il s’agisse d’entités provenant du serveur ou de données d’état de l’interface utilisateur, Akita dispose de magasins personnalisés, d’outils puissants et de plugins sur mesure, qui vous aident à gérer les données et à éliminer le besoin de quantités massives de code standard. Nous / je vous recommande fortement de l’essayer.

Suivez-moi sur Medium ou Twitter pour en savoir plus sur Angular, Akita et JS!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.