Vue的輪播組件怎麼會使用

這次帶給大家Vue的輪播組件怎麼使用，使用Vue輪播組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

本篇採用Vue結合css3來實現輪播圖。

# 首先要了解的是Vue的動畫原理。在vue中，如果我們要為元素設定動畫效果，則需要使用一個將對應的元素包住，如下：

<transition> 
 <img  src="/static/imghwm/default1.png" data-src="/1.jpg" class="lazy" alt="Vue的輪播組件怎麼會使用" > 
</transition>

之後，便可以在.imgShoudMove中設定動畫屬性了，如下:

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

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

我自己對其的理解為，其中 shouldShouldMove-enter 表示動畫開始的初始狀態， imgShouldMove-enter-active 這表示動畫的終止狀態。而動畫的觸發則是透過if-show引起的。

如下圖

# 了解了這些之後，我就可以開始著手實現輪播圖組件了。

首先是HTML程式碼：

<template>
 <p>
 </p>
<p>
 <a>
 <transition>
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  src="/static/imghwm/default1.png" data-src="pics[currentIndex].src" class="lazy" alt="Vue的輪播組件怎麼會使用" >
 </transition>
 <transition>
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  src="/static/imghwm/default1.png" data-src="pics[currentIndex].src" class="lazy" alt="Vue的輪播組件怎麼會使用" >
 </transition>
 </a>
 </p>
 <h2 id="pics-currentIndex-title">{{pics[currentIndex].title}}</h2>
 <ul>
 <li>{{index + 1}}</li>
 </ul>
 <p><i></i></p>
 <p><i></i></p>
 
</template>

Script程式碼：

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 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 = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

# 與動畫相關的css程式碼如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px); //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px); //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); //老图片向左侧940px出去 
}

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

# 注意：對於需要放在裡面，需要設定為position:relative; 而必須設定為position:absolute; 這一步驟非常非常重要，否則每次莫名其妙的總是只有一張圖片顯示。

在每次切換的時候，都要觸發goto()方法，將this.isShow先置false，10毫秒後，this.isShow置true。這時，html中的被觸發，它與css結合觸發動畫效果，持續時間為css屬性中的transition所定的0.5s。

在向前、向後切換的時候，使用到了計算屬性，在p.prevBtn以及p.nextBtn上，我們作了點擊事件綁定，觸發方法goto(),而傳入的正是計算屬性prevIndex， @ click="goto(prevIndex)"

計算屬性的設定方法如下：

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },</template>

每隔2秒自動滑動時，我們向left滑動，在data中，設定了變數 direction ，它的值要麼為字串'toleft'，要麼為'toright'。

我們在計算屬性中對 this.direction 進行了設置，並在

<transition></transition>

在vue中，除了class和style可以傳入物件、數組，其他的屬性綁定必須進行字串拼接。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用swiper元件實現輪播廣告效果

vue實作圖片的跑馬燈捲動

以上是Vue的輪播組件怎麼會使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！