快捷導(dǎo)航

vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果

更新時(shí)間：2017年10月10日 10:46:17 作者：大笨象扎支搶區(qū)打仗

這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

學(xué)習(xí)了vue.js也有一段時(shí)間了，做了個(gè)小demo來(lái)熟悉一下，很常見的demo，-------輪播圖，沒學(xué)vue之前的輪播圖用JavaScript或者jquery都非常簡(jiǎn)單，發(fā)現(xiàn)用vue來(lái)寫也挺有意思的。說(shuō)下簡(jiǎn)單的思路，圖片的輪播用v-if或者v-show來(lái)代替原來(lái)的Js滑動(dòng)，過(guò)度效果用transition可簡(jiǎn)單實(shí)現(xiàn)，注意，滑動(dòng)過(guò)程中是能看見兩張圖的，所以要用兩個(gè)transition。

（1）先寫出整體的框架

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if='ifshow' :src='imgArray[nowindex]'>
</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>

根據(jù)imgArray這個(gè)照片的數(shù)組渲染小圓點(diǎn)的數(shù)量，為span綁定on為小圓點(diǎn)點(diǎn)亮的狀態(tài)，照片的顯示隱藏通過(guò)自定義變量ifshow來(lái)顯示，nowindex則控制輪播對(duì)應(yīng)的照片。

（2）輪播圖的數(shù)組，如果是本地的圖片，而且不放在static文件下的，請(qǐng)用require圈上路徑，否則路徑會(huì)報(bào)錯(cuò)。如果是從后臺(tái)服務(wù)器獲取的則不需要。

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

（3）主要就是通過(guò)改變自定義變量nowindex來(lái)改變輪播圖的狀態(tài)，要注意滑動(dòng)的過(guò)程是能看見兩張圖的，所以在goto函數(shù)中設(shè)置了一個(gè)短暫的定時(shí)器，讓一張顯示另一張隱藏，分別加上不同的過(guò)度效果。

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

到這里，這個(gè)簡(jiǎn)單的輪播圖就到此結(jié)束了。

關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: