la lanterne tournante vue saute automatiquement

Vue.js est aujourd'hui un framework front-end populaire. Il fournit une multitude de composants et de plug-ins pour aider les développeurs à développer d'excellentes applications Web rapidement et efficacement. L'un des composants les plus courants est le composant Carousel, qui nous permet d'afficher plusieurs images ou carrousels et prend en charge la commutation manuelle ou automatique du contenu d'affichage. Cet article explique comment utiliser la bibliothèque de composants Vue.js et Element UI pour implémenter la fonction de saut automatique de la lanterne tournante.

1. Préparation

Tout d'abord, nous devons introduire la bibliothèque de composants Element UI dans le projet, qui peut être installé via npm :

npm install element-ui --save

Ensuite, introduisez ElementUI via l'importation dans main.js et enregistrez le composant :

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. Créer un composant de lanterne tournante

Créez un fichier de composant Carousel.vue dans le projet et définissez le modèle de composant via la balise de modèle :

<template>
  <el-carousel :interval="interval" :autoplay="autoplay">
    <el-carousel-item v-for="(item, index) in items" :key="index">
      <img :src="item.imgUrl" />
      <h3>{{ item.title }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

Dans le composant, nous avons utilisé les composants el-carousel et el-carousel-item dans Element UI, ils fournissent un riche ensemble d’options de configuration et de hooks d’événements pour personnaliser le comportement d’affichage et d’interaction. Ici, nous définissons uniquement l'attribut d'intervalle et l'attribut de lecture automatique, qui indiquent respectivement l'intervalle de rotation et s'il faut activer la rotation automatique.

De plus, grâce à la directive v-for, nous rendons chaque élément du tableau items dans un élément de carrousel. Chaque élément du carrousel contient une image et un titre, correspondant aux attributs imgUrl et title dans le modèle de données.

3. Ajouter des données et des méthodes

Dans le composant, nous devons définir le modèle de données et quelques méthodes pour implémenter la fonction carrousel automatique. Ici, nous utilisons la propriété calculée pour calculer l'index de l'élément de carrousel actuel et mettons à jour la valeur de cette propriété à chaque fois que l'élément de carrousel est commuté.

<script>
export default {
  data() {
    return {
      items: [
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' }
      ],
      currentIndex: 0,
      interval: 3000,
      autoplay: true
    }
  },
  computed: {
    activeIndex() {
      return this.currentIndex % this.items.length
    }
  },
  methods: {
    handleCarouselChange(index) {
      this.currentIndex = index
    }
  }
}
</script>

Parmi eux, le tableau items est utilisé pour stocker les données des éléments du carrousel, l'attribut currentIndex représente l'index de l'élément du carrousel actuel, et les attributs interval et autoplay sont utilisés pour configurer l'intervalle de temps du carrousel et la lecture automatique. changer.

Une propriété calculée activeIndex est définie via la propriété calculée. Elle n'est pas directement liée à la propriété activeIndex du composant carrousel, mais est calculée. Il s'agit d'implémenter la fonction de boucle du carrousel. Lorsque la valeur d'index de l'élément de carrousel actuel atteint la longueur des éléments du tableau, elle sera réinitialisée à 0. De cette façon, nous pouvons obtenir l'effet de revenir automatiquement au premier élément du carrousel après avoir atteint le dernier élément du carrousel.

Dans le même temps, nous avons également défini la méthode handleCarouselChange, qui sera appelée lorsque l'élément du carrousel est changé, et enregistre la valeur d'index de l'élément de carrousel actuel en mettant à jour la propriété currentIndex.

4. Implémentation du carrousel automatique

Maintenant, nous avons terminé la configuration de base et l'implémentation des fonctions du composant lanterne tournante. Ensuite, nous allons écrire le code du carrousel automatique dans le crochet de cycle de vie monté :

<script>
export default {
  mounted() {
    setInterval(() => {
      this.currentIndex++
    }, this.interval)
  }
  // ...
}
</script>

Ici, nous utilisons. La méthode setInterval de JavaScript est utilisée pour exécuter le code régulièrement afin d'obtenir une commutation automatique des images du carrousel. Nous définissons l'intervalle de temps de chaque rotation sur la valeur définie par l'attribut interval pour obtenir un contrôle du temps unifié.

À ce stade, nous avons terminé la mise en œuvre de la fonction de saut automatique de la lanterne tournante. Vous pouvez ajuster l'intervalle de rotation en configurant l'attribut d'intervalle, et vous pouvez également désactiver ou activer la rotation automatique en modifiant l'attribut de lecture automatique.

Résumé

Grâce à l'introduction et à la démonstration de cet article, nous avons appris comment implémenter la fonction de saut automatique de la lanterne tournante via Vue.js et la bibliothèque de composants Element UI, et comment implémenter la lecture en boucle carrousel. Ceci est très pratique pour divers scénarios tels que l'affichage d'images, d'informations sur l'actualité, la promotion de produits, etc. dans les applications Web. Dans le développement réel, nous pouvons optimiser et étendre davantage le code en fonction des besoins spécifiques de l'entreprise afin d'améliorer les performances des applications et l'expérience utilisateur.

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!