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

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

創(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)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

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

首先要了解的是Vue的動畫原理。在vue中，如果我們要給元素設(shè)置動畫效果，則需要使用一個將相應(yīng)的元素包裹住，如下：

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

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

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

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

如下圖

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

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

首先是HTML代碼：

Script代碼：

與動畫相關(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出去 
}

---------------以下為解釋說明-------------

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

在每次切換的時(shí)候，都要觸發(fā)goto()方法，將this.isShow先置false，10毫秒后，this.isShow置true。這時(shí)，html中的被觸發(fā)，它與css相結(jié)合觸發(fā)動畫效果，持續(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)過一番計(jì)算過程得出result 
 return result //這個值即

網(wǎng)站建設(shè)知識

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

{{pics[currentIndex].title}}

其他資訊