Kann vue.js Karussellbilder erstellen?

vue.js kann Karussellbilder erstellen: Schreiben Sie zuerst das Gesamtgerüst und rendern Sie dann die Anzahl der kleinen Punkte entsprechend dem Array der imgArray-Fotos ; Verwenden Sie abschließend die benutzerdefinierte Variable ifshow, um das Ein- und Ausblenden des Bildes anzuzeigen, und legen Sie nowindex fest, um das Karussell zu steuern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue-Version 2.0. Diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „vue.js Tutorial“

Ich habe kürzlich Vuejs gelernt und versucht, mit Vuejs ein einfaches Bilderkarussell zu schreiben, also habe ich eine einfache Aufzeichnung erstellt

(1) Schreiben Sie zuerst das Ganze Das Framework

<template>
<div class="slide-show">
<div 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>
</div>
</div>
</template>

rendert die Anzahl der kleinen Punkte basierend auf dem Array der imgArray-Fotos und bindet sich an die Spanne, um die kleinen Punkte zum Leuchten zu bringen. Das Foto wird über die benutzerdefinierte Variable ifshow angezeigt und ausgeblendet, und nowindex steuert die entsprechenden Fotos im Karussell.

(2) Wenn es sich bei der Reihe von Karussellbildern um ein lokales Bild handelt 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 Karussellbilds durch Ändern der benutzerdefinierten Variablen nowindex zu ändern. Es ist zu beachten, dass während des Schiebevorgangs zwei Bilder angezeigt werden, sodass in der Goto-Funktion ein kurzer Timer eingestellt ist Damit wird einer angezeigt und der andere ausgeblendet, jeweils mit unterschiedlichen Übergangseffekten.

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

Hier endet dieses einfache Karussellbild.

Das obige ist der detaillierte Inhalt vonKann vue.js Karussellbilder erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!