Vue.js peut-il créer des images de carrousel ?

vue.js peut créer des images carrousel. La méthode d'implémentation est la suivante : écrire d'abord le cadre global, puis restituer le nombre de petits points en fonction du tableau de photos imgArray, puis lier l'étendue aux petits points ; state; enfin, utilisez la variable personnalisée ifshow pour afficher l'affichage et le masquage de l'image, et définissez nowindex pour contrôler le carrousel.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.0 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vue.js"

J'ai récemment appris vuejs et essayé d'écrire un carrousel d'images simple en utilisant vuejs, faisons un simple enregistrement

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

Restituez le nombre de petits points en fonction du tableau de la photo imgArray, et liez-le au petit cercle pour la durée Dans le À l'état allumé, l'affichage et le masquage des photos 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.

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!