Comment écrire une image de carrousel dans vue.js

Comment écrire une image de carrousel dans vue.js : écrivez d'abord le framework global ; puis définissez le tableau d'images de carrousel et téléchargez enfin les images de carrousel en modifiant la variable personnalisée nowindex .

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Recommandations d'articles connexes : vue.js]

Comment écrire une image de carrousel dans vue.js :

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. pendant le processus de glissement, il y a deux images, donc deux transitions sont nécessaires.

(1) Écrivez d'abord le cadre global

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

Rendu le nombre de petits points en fonction du tableau de photos imgArray, liez-vous à la travée pour éclairer les petits points, photo L'affichage et masquage sont affichés 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 modifiant la variable personnalisée nowindex. Il convient de noter que deux images peuvent être vues pendant le processus de glissement, donc un court timing est défini. dans la fonction goto, l'appareil permet d'afficher l'un et de masquer l'autre, et différents effets de transition peuvent être ajoutés à chacun.

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

C'est la fin de cette simple image de carrousel.

Recommandations d'apprentissage gratuites associées : JavaScript(Vidéo)

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!