Implementieren Sie ein einfaches Karussell mit vue.js

Ich habe eine kleine Demo erstellt, um mich damit vertraut zu machen. Vor dem Erlernen von Vue wurde das Karusselldiagramm verwendet jquery Sie sind alle sehr einfach und ich fand es sehr interessant, sie in Vue zu schreiben. Lassen Sie uns über eine einfache Idee sprechen. Verwenden Sie v-if oder v-show, um das ursprüngliche JS-Sliding für das Bildkarussell zu ersetzen. Beachten Sie, dass während des Sliding-Vorgangs zwei Bilder sichtbar sind ein Übergang.

(1) Schreiben Sie zunächst den Gesamtrahmen

<template>
<p class="slide-show">
<p class="slide-img">
<transition name="slide-trans" >
<img v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39;>
</transition>
<transition name="slide-trans-old">
         <img v-if="!ifshow" :src="imgArray[nowindex]">
       </transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</p>
</p>
</template>

Rendern Sie die Anzahl der kleinen Punkte basierend auf dem Array der imgArray-Fotos und binden Sie sie an die Spanne, um die kleinen Punkte zum Leuchten zu bringen. , das Ein- und Ausblenden von Fotos wird über die benutzerdefinierte Variable ifshow angezeigt, und nowindex steuert die dem Karussell entsprechenden Fotos.

(2) Wenn das Array von Karussellbildern ein lokales Bild ist und nicht unter einer statischen Datei platziert ist, kreisen Sie den Pfad bitte mit „require“ ein, andernfalls meldet der Pfad einen Fehler. Nicht erforderlich, wenn es vom Backend-Server bezogen wird.

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3) Der Hauptzweck besteht darin, den Status des Karussellbildes durch Ändern der benutzerdefinierten Variablen nowindex zu ändern. Es ist zu beachten, dass während des Schiebevorgangs zwei Bilder zu sehen sind, also eine kurze Zeit wird in der Funktion „Gehe zu“ festgelegt. Mit dem Timer kann einer angezeigt und der andere ausgeblendet werden, wodurch jeweils unterschiedliche Übergangseffekte hinzugefügt werden.

<script type="text/javascript">export default {
    props: {
    imgArray: {
    type:Array,default:[]
}
},data() {
    return {
    ifshow:true,nowindex:0,
}
},created() {
    this.timerun()
}
,computed: {
    nextindex() {
    if(this.nowindex === this.imgArray.length -1) {
    return 0
}
else {
    return this.nowindex + 1
}
}
}
,methods: {
    goto(index) {
    let that = this;
    this.ifshow = false;
    setTimeout(function() {
    that.ifshow = true;
    that.nowindex = index;
}
,100)
}
,timerun() {
    let that = this;
    setInterval(function() {
    that.goto(that.nextindex) }
,2000) }
}
}
到这里，这个简单的轮播图就到此结束了。
</script>

Das obige ist der detaillierte Inhalt vonImplementieren Sie ein einfaches Karussell mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!