Home-theater-designers
Le défilement infini est une technique que vous pouvez utiliser pour afficher plus de contenu à mesure que l'utilisateur de votre application fait défiler la page. Il élimine le besoin de pagination et permet aux utilisateurs de l'application de continuer à faire défiler de grands ensembles de données.
Vidéo MUO du jour FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
Configuration de votre application Vue
Pour suivre ce didacticiel, vous avez besoin d'une compréhension de base de Vue 3 et de JavaScript. Il faut savoir gérer Requêtes HTTP avec Axios .
Pour commencer à apprendre à implémenter le défilement infini , créez une nouvelle application Vue en exécutant ce qui suit npm commande dans votre répertoire préféré :
npm create vue
Lors de la configuration du projet, Vue vous demandera de sélectionner un préréglage pour votre application. Choisir Non pour toutes les fonctionnalités, car vous n'aurez besoin d'aucun ajout à votre application.
Une fois que vous avez créé la nouvelle application, accédez au répertoire de l'application et exécutez la commande suivante npm commande pour installer les packages nécessaires :
npm install axios @iconify/vue @vueuse/core
Le npm La commande installe trois packages : axios (pour les requêtes HTTP), @iconify/vue (pour une intégration facile des icônes dans Vue) , et @vueuse/core (offrant les utilitaires Vue essentiels).
Vous utiliserez axios et @iconify/vue pour récupérer des données et ajouter des icônes à votre application. @vueuse/core contient les utilitaires Vue, y compris le utiliserInfiniteScroll composant pour obtenir un défilement infini.
Récupération de données factices à partir de l'API JSONPlaceholder
Pour implémenter la fonction de défilement infini, vous avez besoin de données. Vous pouvez soit coder en dur ces données, soit obtenir des données à partir d'une fausse source API gratuite comme JSONPlaceholder .
L'obtention de ces données à partir de JSONPlaceholder imite des scénarios réels, car la plupart des applications Web obtiennent des données à partir de bases de données au lieu de données codées en dur.
Pour récupérer les données de l'API pour votre application Vue, créez un nouveau dossier dans votre src répertoire et nommez-le API . Dans ce dossier, créez un nouveau fichier JavaScript et collez le code suivant :
//getComments.js
import axios from "axios";
async function getComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
export default getComments;
L'extrait de code consiste en une fonction asynchrone permettant d'obtenir des commentaires du point de terminaison de l'API. 'https://jsonplaceholder.typicode.com/comments' . Il exporte ensuite la fonction.
Pour expliquer davantage, l'extrait de code commence par l'importation du axios bibliothèque. Le code définit ensuite le obtenir des commentaires fonction avec deux arguments : maximum et omettre .
Le obtenir des commentaires la fonction abrite le axios.get() méthode qui envoie une requête GET à l'URL. L'URL contient des paramètres de requête maximum et omettre , qui sont interpolés dans la chaîne à l'aide de littéraux de modèle ( `` ). Cela vous permet de transmettre des valeurs dynamiques dans l'URL.
La fonction renvoie ensuite un nouveau tableau composé des corps des commentaires reçus du point de terminaison de l'API à l'aide du carte fonction.
icône d'alimentation manquante dans la barre des tâches Windows 10
Si une erreur se produit, l’extrait de code l’enregistre dans la console. L'extrait de code exporte ensuite cette fonction vers d'autres parties de votre application.
Création du composant de défilement infini
Maintenant que vous avez géré la logique de récupération des données factices, vous pouvez créer un nouveau composant pour afficher les données factices et gérer la fonction de défilement infini.
Créer un nouveau fichier InfiniteScroll.vue dans le src/composants répertoire et ajoutez le code suivant :
<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
const newComments = await getComments(
commentsDisplayed,
commentsList.value.length
);
commentsList.value.push(...newComments);
};
useInfiniteScroll(
listEl,
async () => {
await commentsToDisplayOnScroll();
},
{ distance: 10 }
);
</script>
L'extrait de code ci-dessus décrit le bloc de script du DEFILEMENT infini composant.
L'extrait de code importe le réf et utiliserInfiniteScroll fonctions de vue et @vueuse/core , respectivement. L'extrait importe également le obtenir des commentaires fonction de la getComments.js déposer.
Ensuite, l'extrait crée un listEl référence avec le réf fonction. listEl fait référence à l'élément DOM avec la fonctionnalité de défilement infini.
comment puis-je récupérer mon compte fb?
Le commentairesAffiché La variable représente le nombre de commentaires à afficher initialement sur la page. Liste des commentaires contient le tableau de commentaires que l'extrait de code récupère avec le obtenir des commentaires fonction.
L'extrait définit un commentairesToDisplayOnScroll fonction asynchrone qui récupère de nouveaux commentaires avec le obtenir des commentaires fonction et les ajoute à l'existant Liste des commentaires tableau avec l'opérateur spread ( ... ).
Enfin, l'extrait de code appelle le utiliserInfiniteScroll fonction pour activer le comportement de défilement infini en prenant trois arguments :
- L'élément DOM ( listEl ) la référence représente la liste que l'utilisateur de l'application fera défiler.
- Un appel de fonction asynchrone lorsque l'utilisateur fait défiler pour déclencher la récupération de nouveaux commentaires et leur ajout au Liste des commentaires .
- Un objet de configuration facultatif avec des propriétés. L'object { distance : 10 } spécifie que les nouveaux commentaires doivent commencer à se charger lorsque l'utilisateur se trouve à 10 pixels du bas de la liste.
Utilisation du composant de défilement infini
Après avoir géré la logique de défilement infini dans le bloc de script du DEFILEMENT infini composant, vous devez restituer le contenu dans le bloc modèle.
Collez le bloc de code suivant dans votre DEFILEMENT infini composant:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Ce bloc de code définit le modèle d'un composant Vue chargé de restituer une liste de commentaires.
Le l'élément contient une collection de
Chaque commentaire du tableau est affiché dans un pour activer la fonction de défilement infini.
Ensuite, vous pouvez utiliser le DEFILEMENT infini composant dans votre app.vue déposer.
<!-- App.vue -->
<script setup>
import InfiniteScroll from "./components/InfiniteScroll.vue";
import { Icon } from "@iconify/vue";
</script>
<template>
<Suspense>
<InfiniteScroll />
<template #fallback>
<Icon icon="eos-icons:bubble-loading" width="250" height="250" />
</template>
</Suspense>
</template>
Le bloc de code ci-dessus importe le DEFILEMENT infini Composant et le Icône composant. Il enveloppe ensuite le DEFILEMENT infini composant dans un Le suspense composant.
Le Le suspense vous permet de rendre le contenu de secours (une icône) lorsque Vue résout toutes les fonctions asynchrones dans le DEFILEMENT infini composant.
Maintenant, vous pouvez prévisualiser votre application en exécutant la commande npm run dev dans le répertoire de l'application. Vous devriez voir une interface similaire à l'image ci-dessous :
L'aperçu ci-dessus affiche dix commentaires lorsque vous définissez le commentairesAAfficher variable à 10. Lorsque vous faites défiler vers le bas, l'application charge plus de commentaires à lire.
La technique de défilement infini est populaire parmi les applications Web, en particulier dans les applications de médias sociaux comme X et Tiktok.
Cette technique garantit que les utilisateurs de l'application restent engagés car elle récupère continuellement plus de données, leur fournissant un flux de contenu en constante expansion à lire, apprendre et regarder, gardant ainsi leur intérêt piqué.
Apprenez à réutiliser les composants Vue avec des slots
Vous avez appris à implémenter la technique de défilement infini avec le composant useInfiniteScroll disponible pour VueUse.
Dans les sites Web modernes, il est courant d'afficher les mêmes composants avec un contenu HTML différent. Vous pouvez apprendre à réutiliser les composants Vue pour obtenir cette sensation cohérente dans les différentes parties d'une application Web.