學習了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='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> </p> </p> </template>
根據imgArray這個照片的陣列渲染小圓點的數量,為span綁定on為小圓點點亮的狀態,照片的顯示隱藏透過自訂變數ifshow來顯示,nowindex則控制輪播對應的照片。
(2)輪播圖的數組,如果是本地的圖片,而且不放在static檔案下的,請用require圈上路徑,否則路徑會報錯。如果是從後台伺服器取得的則不需要。
data(){ return{ imgArray: [ require('../../img/item_01.png'), require('../../img/item_02.png'), require('../../img/item_03.png'), require('../../img/item_04.png') ] } }
(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中文網其他相關文章!