So verwenden Sie die Karussellkomponente von Vue

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Karussellkomponente verwenden VorsichtsmaßnahmenHier ist ein praktischer Fall, schauen wir uns das an.

Dieser Artikel verwendet Vue in Kombination mit CSS3, um das Karusselldiagramm zu implementieren.

Das erste, was man verstehen muss, ist das Animationsprinzip von Vue. Wenn wir in Vue ein Element animieren möchten, müssen wir einen verwenden, um das entsprechende Element wie folgt zu umschließen:

<transition> 
 <img  alt="So verwenden Sie die Karussellkomponente von Vue" > 
</transition>

Danach können Sie die Animationseigenschaften in .imgShoudMove wie folgt festlegen:

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

Beachten Sie, dass in HTML ein v-if="shoudShow"-Attribut hat. Das Attribut „shouldShow“ wird in data(){} festgelegt. Wenn „shouldShow“ von „false“ auf „true“ wechselt (d. h. wenn img plötzlich aus dem Nichts erscheint), unterteilt das Vue-Animationsprinzip die Animation in Es gibt zwei Phasen: ShouldShouldMove-enter und imgShouldMove-enter-active.

Mein eigenes Verständnis davon ist, dass ShouldShouldMove-enter den Anfangszustand darstellt, wenn die Animation beginnt, und imgShouldMove-enter-active den Endzustand der Animation darstellt. Die Animation wird durch if-show ausgelöst.

Wie unten gezeigt

Nachdem ich dies verstanden habe, kann ich mit der Implementierung der Karussellkomponente beginnen.

Zuerst ist der HTML-Code:

<template>
 <p>
 </p>
<p>
 <a>
 <transition>
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  alt="So verwenden Sie die Karussellkomponente von Vue" >
 </transition>
 <transition>
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  alt="So verwenden Sie die Karussellkomponente von Vue" >
 </transition>
 </a>
 </p>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul>
 <li>{{index + 1}}</li>
 </ul>
 <p><i></i></p>
 <p><i></i></p>
 
</template>

Skriptcode:

<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>

Der CSS-Code für Animationen lautet wie folgt

.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出去 
}

---------------Das Folgende ist eine Erklärung-------------

Hinweis: muss innerhalb von platziert werden, muss auf position:relative; gesetzt werden. Und muss auf position:absolute; gesetzt sein. Dieser Schritt ist sehr, sehr wichtig, sonst wird immer nur ein Bild angezeigt.

Bei jedem Wechsel muss die Methode goto() ausgelöst werden, wobei this.isShow zunächst auf „false“ und nach 10 Millisekunden auf „true“ gesetzt wird. Zu diesem Zeitpunkt wird der im HTML ausgelöst, der mit dem CSS kombiniert wird, um den Animationseffekt auszulösen. Die Dauer beträgt 0,5 Sekunden, die durch den Übergang im CSS-Attribut festgelegt wird.

Beim Vorwärts- und Rückwärtsschalten werden berechnete Eigenschaften verwendet. Auf p.prevBtn und p.nextBtn binden wir Klickereignisse, um die Methode goto() auszulösen, und die berechnete Eigenschaft prevIndex wird übergeben, @ click="goto(prevIndex)"

Die Einstellungsmethode der berechneten Attribute ist wie folgt:

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

Beim automatischen Gleiten alle 2 Sekunden wird die Richtung der Variablen in den Daten festgelegt und ihr Wert ist entweder string „toleft“ oder „toright“.

Wir haben this.direction im berechneten Attribut festgelegt und den entsprechenden Namen mit Zeichenfolgen in

<transition></transition>

In Vue müssen zusätzlich zu Klasse und Stil, die in Objekten und Arrays übergeben werden können, auch andere Attributbindungen durch Zeichenfolgen gespleißt werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung der Swiper-Komponente, um einen Karussell-Werbeeffekt zu erzielen

Vue implementiert das Laufschrift-Scrollen von Bildern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Karussellkomponente von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!