Bases du développement VUE3 : créez une liste déroulante infinie à l'aide du plug-in Vue.js

Vue.js est un framework JavaScript populaire permettant de créer rapidement des applications Web interactives. La dernière version de Vue.js 3 offre de nombreuses nouvelles fonctionnalités et optimisations de performances, dont l'une des demandes très courantes est la création de listes déroulantes infinies. Cet article explique comment utiliser le plugin Vue.js pour créer une liste déroulante infinie.

Qu'est-ce qu'une liste déroulante infinie ?

Les listes déroulantes infinies sont un modèle de conception courant dans les applications Web qui chargent dynamiquement de grandes quantités de données (par exemple, des articles, des listes de produits, etc.) et chargent automatiquement davantage de données à mesure que l'utilisateur fait défiler vers le bas. Ce modèle de conception est très efficace pour améliorer l’expérience utilisateur et réduire le temps de chargement des pages.

Plugins Vue.js

Vue.js utilise des plugins pour étendre ses fonctionnalités. Les plugins peuvent ajouter des fonctionnalités globales aux applications Vue.js et sont faciles à utiliser dans les projets Vue.js. Les plugins Vue.js sont généralement ajoutés aux applications via la méthode Vue.use().

Plugins de liste à défilement infinie

Dans Vue.js, plusieurs plugins de liste à défilement infinie sont disponibles. L'un d'eux est v-infinite-scroll. v-infinite-scroll est un plugin vue.js léger basé sur des directives qui peut charger dynamiquement du contenu via des événements DOM (« défilement »).

Utilisez le plugin v-infinite-scroll pour implémenter une liste à défilement infini

Voici les étapes pour implémenter une simple liste à défilement infini à l'aide du plugin v-infinite-scroll :

Étape 1 : Installez le v-infinite-scroll plugin

Utilisez npm ou fil installez le plugin v-infinite-scroll :

npm install vue-infinite-scrollnpm install vue-infinite-scroll

或者

yarn add vue-infinite-scroll

ou

yarn add vue-infinite-scroll

Deuxième étape : Importer le plug-in v-infinite-scroll

Importer le plug-in v-infinite-scroll dans le composant Vue :

import infiniteScroll from ‘vue-infinite-scroll’
export default {
  directives: { 
    infiniteScroll
  }
}

Étape 3 : Ajouter la directive v-infinite-scroll en HTML

Ajoutez les éléments qui nécessitent un défilement infini. Directive v-infinite-scroll :

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</div>

Vous pouvez voir que lors du défilement jusqu'à 10 éléments à partir du bas, la méthode loadMore est déclenchée. Cependant, comme nous ne voulons pas que l'utilisateur fasse d'autres requêtes pendant le chargement des données, nous devons ajouter l'indicateur occupé pour désactiver la directive jusqu'à ce que les données soient chargées.

Étape 4 : Implémentez la méthode loadMore dans le composant Vue

Définissez et implémentez la méthode loadMore dans le composant Vue, qui est utilisée pour charger plus de données et les ajouter à la liste :

export default {
  data() {
    return {
      list: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      busy: false
    }
  },
  methods: {
    async loadMore() {
      if (this.busy) return
      this.busy = true
      // 模拟从服务器获得新数据的延迟
      await new Promise(resolve => setTimeout(resolve, 2000))
      this.list.push('Item ' + (this.list.length + 1))
      this.busy = false
    }
  },
  directives: { 
    infiniteScroll
  }
}

Dans cet exemple, loadMore La méthode utilise async/await pour charger de nouvelles données de manière asynchrone. Une fois le chargement des données terminé, ajoutez les nouvelles données à la liste existante et définissez l'indicateur occupé sur false pour réactiver la directive.

Résumé🎜🎜L'utilisation des plugins Vue.js peut rendre les applications Vue.js plus évolutives et flexibles. Utilisez le plugin v-infinite-scroll pour implémenter facilement des listes à défilement infini, optimiser l'expérience utilisateur et réduire le temps de chargement des pages. Grâce aux étapes ci-dessus, vous pouvez implémenter une liste déroulante infinie de base dans Vue.js 3 et la compléter en fonction de vos besoins. 🎜

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!