您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue.js如何編寫一個輪播圖的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
vue.js寫一個輪播圖的方法:首先寫出整體的框架;然后定義輪播圖的數(shù)組,上傳本地圖片;最后通過改變自定義變量nowindex來改變輪播圖的狀態(tài)。
vue.js寫一個輪播圖的方法:
說下簡單的思路,圖片的輪播用v-if
或者v-show
來代替原來的Js滑動,過度效果用transition可簡單實(shí)現(xiàn),注意,滑動過程中是能看見兩張圖的,所以要用兩個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這個照片的數(shù)組渲染小圓點(diǎn)的數(shù)量,為span綁定on為小圓點(diǎn)點(diǎn)亮的狀態(tài),照片的顯示隱藏通過自定義變量ifshow來顯示,nowindex則控制輪播對應(yīng)的照片。
(2)輪播圖的數(shù)組,如果是本地的圖片,而且不放在static文件下的,請用require圈上路徑,否則路徑會報(bào)錯。如果是從后臺服務(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)主要就是通過改變自定義變量nowindex來改變輪播圖的狀態(tài),要注意滑動的過程是能看見兩張圖的,所以在goto函數(shù)中設(shè)置了一個短暫的定時器,讓一張顯示另一張隱藏,分別加上不同的過度效果。
<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>
感謝各位的閱讀!關(guān)于vue.js如何編寫一個輪播圖就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。