Comment implémenter un carrousel en utilisant vue.js

Comment utiliser vue.js pour implémenter le carrousel : utilisez d'abord "b7d6aa7d26bbcf1354a58cda375316e1" 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 b7d6aa7d26bbcf1354a58cda375316e16087faffb1c3f26530d25a6b190c2f81 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 a1f02c36ba31691bcfe87b2722de723b 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 a1f02c36ba31691bcfe87b2722de723b être placé dans 194f77f479ec01f99df4489f8810fbf8, a8a2d94ad6460784ca7a88c66ac1760a doit être défini sur position:relative et a1f02c36ba31691bcfe87b2722de723b 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 300ff3b250bc578ac201dd5fb34a0004 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 d477f9ce7bf77f53fbcf36bec1b69b7a, comme suit

<transition v-bind:name="&#39;carousel-trans-&#39; + direction ">

En vue, sauf que la classe et le style peuvent être transmis dans les objets et les tableaux, ainsi que les autres liaisons d'attributs, doivent être épissés par des chaînes.

Recommandé : "tutoriel vue"

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!