Comment implémenter un carrousel en utilisant vue.js

Comment utiliser vue.js pour implémenter le carrousel : utilisez d'abord "" pour envelopper l'élément correspondant puis dans ".imgShoudMove" Définissez le ; propriétés d'animation ; enfin utiliser Vue combinée avec CSS3 pour implémenter le graphique carrousel.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.0&&css3, ordinateur Dell G3. Cette méthode convient à toutes les marques. d'ordinateurs.

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

La première chose que vous devez 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 : Après

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

, vous peut définir les attributs d'animation dans .imgShoudMove, comme suit :

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

Notez qu'en HTML, ici 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 ShouldShouldMove - Il y en a deux. étapes : enter et imgShouldMove-enter-active.

Où ShouldShouldMove-enter représente l'état initial lorsque l'animation démarre, imgShouldMove-enter-active représente l'état de fin de l'animation. L'animation est déclenchée via if-show.

Exemple :

Code HTML :

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction + &#39;-old&#39;">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :
 class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>
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出去 
}

Remarque : pour être placé dans , doit être défini sur position:relative et doit être défini sur position:absolute;. affiché inexplicablement à chaque fois.

Chaque fois que vous changez, la méthode goto() doit être déclenchée, et this.isShow doit d'abord être défini sur false. Après 10 millisecondes, this.isShow doit être 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 div.prevBtn et div.nextBtn, nous lions l'événement click pour déclencher la méthode goto(), et le positif entrant est l'attribut calculé prevIndex, @click="goto(prevIndex)"

La méthode de paramétrage de l'attribut calculé est la suivante :

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

En glissant automatiquement toutes les 2 secondes, on glisse vers la gauche, dans les données, le la direction de la variable est définie et sa valeur est soit la chaîne « toleft » ou « toright ».

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