Heim > Artikel > Web-Frontend > 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
<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:'toleft' } }, computed:{ prevIndex(){ this.direction = 'toleft' if (this.currentIndex <= 0) { return this.pics.length - 1 } return this.currentIndex - 1 }, nextIndex(){ this.direction = 'toright' 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 = 'toright' 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
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 wie folgt verkettet:
<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!