Implémenter un défilement virtuel efficace avec Vue.js

Introduction

Dans ce projet, vous apprendrez à implémenter une liste de défilement virtuel à l'aide de Vue.js. Le défilement virtuel est une technique qui ne rend que la zone visible d'un grand ensemble de données, plutôt que de rendre ou de partiellement rendre les données dans la zone non visible. Cela permet d'obtenir des performances de rendu extrêmement élevées et convient au rendu d'un grand nombre de données avec un faible volume.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous apprendrez :

• Comment charger et rendre des données de manière asynchrone à l'aide de la bibliothèque axios
• Comment implémenter la fonctionnalité de défilement virtuel pour ne rendre que les éléments de liste visibles
• Comment calculer les indices de début et de fin des éléments de liste visibles en fonction de la position de défilement actuelle
• Comment optimiser les performances de rendu en utilisant une mémoire tampon (buffer) pour rendre des éléments de liste supplémentaires en dehors de la zone visible

🏆 Réalisations

Après avoir terminé ce projet, vous serez en mesure de :

• Implémenter la fonctionnalité de défilement virtuel pour améliorer les performances de rendu
• Charger et rendre des données de manière asynchrone dans un composant Vue.js
• Calculer les éléments de liste visibles en fonction de la position de défilement actuelle
• Utiliser une mémoire tampon (buffer) pour éviter un écran blanc lors du défilement

Configurer la structure du projet

Dans cette étape, vous apprendrez à connaître la structure du projet et les fichiers impliqués dans la fonctionnalité de connexion.

La structure du répertoire du projet est la suivante :

Le code initial pour cette question a déjà été fourni. Ouvrez l'environnement de codage, et la structure du répertoire est la suivante :

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

Où :

• js/axios.min.js est le fichier de la bibliothèque de requêtes axios.
• js/vue.min.js et js/http-vue-loader.js sont des fichiers liés à la bibliothèque Vue.js.
• data.json est le fichier de données à demander.
• index.html est la page principale.
• virtual-scroll-list.vue est le fichier de composant à compléter.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle (VM) et actualisez-la manuellement, et vous verrez la page. L'effet initial est une boîte de liste vide.

Chargement et rendu asynchrones des données

Dans cette étape, vous apprendrez à charger et à rendre des données de manière asynchrone en utilisant la bibliothèque axios.

1. Ouvrez le fichier virtual-scroll-list.vue.
2. Dans le hook de cycle de vie mounted(), utilisez axios pour effectuer une requête au fichier data.json et remplir les données list :

mounted() {
  // TODO: Completion of data requests
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // calculate the total height
  });
}

Cela permettra de récupérer les données du fichier data.json et de les stocker dans la propriété de données list. La propriété totalHeight est également calculée en fonction de la longueur de list et de itemHeight.

Après avoir terminé cette étape, la liste initiale devrait être rendue avec les données chargées à partir du fichier data.json.

Implémentation du défilement virtuel

Dans cette étape, vous apprendrez à implémenter la fonctionnalité de défilement virtuel.

1. Ouvrez le fichier virtual-scroll-list.vue.
2. Implémentez le gestionnaire d'événements scroll :

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

Le gestionnaire d'événements scroll calcule l'indice start des éléments de liste visibles en fonction de la position de défilement actuelle.

Après avoir terminé cette étape, la fonctionnalité de défilement virtuel devrait être implémentée, et les éléments de liste ne devraient être rendus que lorsqu'ils sont visibles dans la fenêtre d'affichage (viewport). L'effet final est montré dans la figure suivante.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer davantage de laboratoires (labs) sur LabEx pour améliorer vos compétences.