Le défilement infini est pratique lorsque vous devez afficher de grands ensembles de données dans votre application. Apprenez à l'implémenter dans Vue.
Le défilement infini est une technique que vous pouvez utiliser pour afficher plus de contenu lorsque 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.
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 invitera à 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 @vue/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. @vue/core contient les utilitaires Vue, y compris le useInfiniteScroll composant pour réaliser 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 d'API gratuite comme Espace réservé JSON.
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.jsimport axios from"axios";
asyncfunctiongetComments(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);
}
}
exportdefault getComments;
L'extrait de code consiste en une fonction asynchrone permettant d'obtenir des commentaires à partir 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 importer le axios bibliothèque. Le code définit alors le getCommentaires fonction avec deux arguments: maximum et omettre.
Le getCommentaires 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 modèles littéraux (``). Cela vous permet de transmettre des valeurs dynamiques dans l'URL.
La fonction renvoie alors un nouveau tableau composé des corps des commentaires reçus du point de terminaison de l'API à l'aide de carte fonction.
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.
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 :
