Implémenter un carrousel simple à l'aide de vue.js

J'apprends vue.js depuis un moment. J'ai fait une petite démo pour me familiariser avec. Une démo très courante, ------- graphique carrousel Avant d'apprendre vue, le graphique carrousel utilisait JavaScript ou. jquery. Ils sont tous très simples, et j'ai trouvé assez intéressant de les écrire dans Vue. Parlons d'une idée simple. Utilisez v-if ou v-show pour remplacer le glissement JS d'origine pour le carrousel d'images. L'effet de transition peut être facilement obtenu avec la transition. Notez que deux images peuvent être vues pendant le processus de glissement, utilisez donc deux. une transition.

(1) Écrivez d'abord le cadre global

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

Rendez le nombre de petits points en fonction du tableau de photos imgArray, et liez-vous à la travée pour éclairer les petits points. , l'affichage et le masquage des photos s'effectuent via la variable personnalisée ifshow, et nowindex contrôle les photos correspondant au carrousel.

(2) Si le tableau d'images du carrousel est une image locale et n'est pas placé sous un fichier statique, veuillez encercler le chemin avec require, sinon le chemin signalera une erreur. Non requis s’il est obtenu à partir du serveur principal.

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

(3) L'objectif principal est de changer le statut de l'image du carrousel en changeant la variable personnalisée nowindex. Il convient de noter que deux images peuvent être vues pendant le processus de glissement, donc un court laps de temps. est défini dans la fonction goto. La minuterie permet d'afficher l'un et de masquer l'autre, ajoutant respectivement différents effets de transition.

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

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!