首頁  >  文章  >  web前端  >  使用vue.js實作簡單輪播

使用vue.js實作簡單輪播

一个新手
一个新手原創
2017-10-10 10:07:582694瀏覽

學習了vue.js也有一段時間了,做了個小demo來熟悉一下,很常見的demo,-------輪播圖,沒學vue之前的輪播圖用JavaScript或jquery都非常簡單,發現用vue來寫也挺有趣的。說下簡單的思路,圖片的輪播用v-if或者v-show來代替原來的Js滑動,過度效果用transition可簡單實現,注意,滑動過程中是能看見兩張圖的,所以要用兩個transition。

(1)先寫出整體的框架

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

根據imgArray這個照片的陣列渲染小圓點的數量,為span綁定on為小圓點點亮的狀態,照片的顯示隱藏透過自訂變數ifshow來顯示,nowindex則控制輪播對應的照片。

(2)輪播圖的數組,如果是本地的圖片,而且不放在static檔案下的,請用require圈上路徑,否則路徑會報錯。如果是從後台伺服器取得的則不需要。

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

(3)主要是透過改變自訂變數nowindex來改變輪播圖的狀態,要注意滑動的過程是能看見兩張圖的,所以在goto函數中設定了一個短暫的定時器,讓一張顯示另一張隱藏,分別加上不同的過度效果。

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

以上是使用vue.js實作簡單輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn