Vue的輪播圖組件實(shí)現(xiàn)方法

今天在上慕課老師fishenal的vue實(shí)戰(zhàn)課程的時(shí)候，有一個(gè)輪播圖組件實(shí)現(xiàn)，在跟著做的時(shí)候，自己也踩了一些坑。此外，在原課程案例的基礎(chǔ)上，我加入了不同方向的滑動(dòng)功能。

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站制作公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

本文章采用Vue結(jié)合Css3來(lái)實(shí)現(xiàn)輪播圖。

首先要了解的是Vue的動(dòng)畫(huà)原理。在vue中，如果我們要給元素設(shè)置動(dòng)畫(huà)效果，則需要使用一個(gè)<transition name="targetClassName"></transition>將相應(yīng)的元素包裹住，如下：

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

之后，便可以在.imgShoudMove中設(shè)置動(dòng)畫(huà)屬性了，如下:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

注意在HTML中，這里<img>有一個(gè)v-if="shoudShow"屬性。shouldShow這個(gè)屬性是在data(){}中設(shè)置的，當(dāng)shouldShow從false-->true時(shí)（即img從無(wú)到突然出現(xiàn)時(shí)），Vue動(dòng)畫(huà)原理將動(dòng)畫(huà)分為了 shouldShouldMove-enter 和 imgShouldMove-enter-active 兩個(gè)階段。

我本人對(duì)其的理解為，其中 shouldShouldMove-enter 表示動(dòng)畫(huà)開(kāi)始的初始狀態(tài)， imgShouldMove-enter-active 這表示動(dòng)畫(huà)的終止?fàn)顟B(tài)。而動(dòng)畫(huà)的觸發(fā)則是通過(guò)if-show引起的。

如下圖

Vue的輪播圖組件實(shí)現(xiàn)方法

了解了這些之后，我就可以開(kāi)始著手實(shí)現(xiàn)輪播圖組件了。

首先是HTML代碼：

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="'carousel-trans-' + direction + '-old'">
 <!-- isShow: false -> true
 取反后: true -> false(從顯示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="'carousel-trans-' + direction ">
 <!-- isShow: false -> true -->
 <!-- 從消失到顯示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h3>{{pics[currentIndex].title}}</h3>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
 </div>
</template>

Script代碼：

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:'toleft'
 }
 },
 computed:{
 prevIndex(){
 this.direction = 'toleft'
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = 'toright'
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
 
 },
 runInterval(){
 this.direction = 'toright'
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

與動(dòng)畫(huà)相關(guān)的css代碼如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px); //新圖片從右側(cè)940px進(jìn)入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px); //老圖片向左側(cè)940px出去 
} 
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); //新圖片從右側(cè)940px進(jìn)入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); //老圖片向左側(cè)940px出去 
}

---------------以下為解釋說(shuō)明-------------

注意：對(duì)于<img>需要放在<box>里面，<box>需要設(shè)置為position:relative; 而<img>必須設(shè)置為position:absolute; 這步非常非常重要，否則每次莫名其妙的總是只有一張圖片顯示。

在每次切換的時(shí)候，都要觸發(fā)goto()方法，將this.isShow先置false，10毫秒后，this.isShow置true。這時(shí)，html中的<transition>被觸發(fā)，它與css相結(jié)合觸發(fā)動(dòng)畫(huà)效果，持續(xù)時(shí)間為css屬性中的transition所定的0.5s。

在向前、向后切換的時(shí)候，使用到了計(jì)算屬性，在div.prevBtn以及div.nextBtn上，我們作了點(diǎn)擊事件綁定，觸發(fā)方法goto(),而傳入的正是計(jì)算屬性prevIndex， @click="goto(prevIndex)"

計(jì)算屬性的設(shè)定方法如下：

computed:{ 
 prevIndex(){ 
 //經(jīng)過(guò)一番計(jì)算過(guò)程得出result 
 return result //這個(gè)值即<template>中的prevIndex 
 } 
 },

每隔2秒自動(dòng)滑動(dòng)時(shí)，我們向left滑動(dòng)，在data中，設(shè)定了變量 direction ，它的值要么為字符串'toleft'，要么為'toright'。

我們?cè)谟?jì)算屬性中對(duì) this.direction 進(jìn)行了設(shè)置，并在<template>中對(duì)相應(yīng)的name進(jìn)行了字符串拼接，如下

<transition v-bind:name="'carousel-trans-' + direction ">

在vue中，除了class和style可以傳入對(duì)象、數(shù)組，其他的屬性綁定必須進(jìn)行字符串拼接。

以上這篇Vue的輪播圖組件實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：Vue的輪播圖組件實(shí)現(xiàn)方法
標(biāo)題URL：http://bm7419.com/article6/jdsiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)建站、App設(shè)計(jì)、服務(wù)器托管、建站公司、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容