Comment utiliser le composant carrousel de Vue

Cette fois, je vais vous montrer comment utiliser le composant carrousel Vue. Quelles sont les précautions lors de l'utilisation du composant carrousel Vue. Voici un cas pratique, jetons un oeil.

Cet article utilise Vue combinée avec CSS3 pour implémenter le graphique carrousel.

La première chose à comprendre est le principe d'animation de Vue. En vue, si nous voulons animer un élément, nous devons utiliser un pour envelopper l'élément correspondant, comme suit :

<transition> 
 <img  alt="Comment utiliser le composant carrousel de Vue" > 
</transition>

Après cela, vous pouvez définir les propriétés de l'animation dans .imgShoudMove, comme suit :

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

Notez qu'en HTML, a un attribut v-if="shoudShow". L'attribut ShouldShow est défini dans data(){}. Lorsque ShouldShow passe de false à true (c'est-à-dire lorsque img apparaît soudainement à partir de rien), le principe d'animation Vue divise l'animation en Il y a deux étapes : ShouldShouldMove-enter et imgShouldMove-enter-active.

Ma propre compréhension est que ShouldShouldMove-enter représente l'état initial lorsque l'animation démarre et imgShouldMove-enter-active représente l'état de fin de l'animation. L'animation est déclenchée via if-show.

Comme indiqué ci-dessous

Après avoir compris cela, je peux commencer à implémenter le composant carrousel.

Le premier est le code HTML :

<template>
 <p>
 </p>
<p>
 <a>
 <transition>
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  alt="Comment utiliser le composant carrousel de Vue" >
 </transition>
 <transition>
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  alt="Comment utiliser le composant carrousel de Vue" >
 </transition>
 </a>
 </p>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul>
 <li>{{index + 1}}</li>
 </ul>
 <p><i></i></p>
 <p><i></i></p>
 
</template>

Code de script :

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
 
 },
 runInterval(){
 this.direction = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

Le code CSS lié à l'animation est le suivant

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px); //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px); //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); //老图片向左侧940px出去 
}

--------------Ce qui suit est une explication-------------

Remarque : doit être placé à l'intérieur de , doit être défini sur position:relative; Et doit être défini sur position:absolute; Cette étape est très, très importante, sinon une seule image sera affichée de manière inexplicable à chaque fois.

À chaque commutateur, la méthode goto() doit être déclenchée, en définissant d'abord this.isShow sur false, et après 10 millisecondes, this.isShow est défini sur true. À ce stade, la dans le HTML est déclenchée, qui est combinée avec le CSS pour déclencher l'effet d'animation. La durée est de 0,5 s définie par la transition dans l'attribut CSS.

Lors du basculement vers l'avant et vers l'arrière, les attributs calculés sont utilisés sur p.prevBtn et p.nextBtn, nous lions les événements de clic pour déclencher la méthode goto(), et l'attribut calculé prevIndex est transmis, @ click="goto(prevIndex)"

La méthode de paramétrage des attributs calculés est la suivante :

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },</template>

Lors d'un glissement automatique toutes les 2 secondes, nous glissons vers la gauche. Dans les données, la direction de la variable est définie et sa valeur est soit chaîne 'toleft' ou 'toright'.

Nous avons défini this.direction dans l'attribut calculé et avons concaténé le nom correspondant avec des chaînes dans

<transition></transition>

En vue, en plus de la classe et du style, qui peuvent être transmis dans les objets et les tableaux, d'autres liaisons d'attributs doivent être épissées par des chaînes.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez le composant swiper pour obtenir un effet publicitaire carrousel

Vue implémente le défilement des images par chapiteau

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!