如何使用vue.js實現輪播

小編給大家分享一下如何使用vue.js實現輪播，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

使用vue.js實現輪播的方法：首先使用“<transition name="targetClassName">”將相應的元素包裹住；然后在“.imgShoudMove”中設置動畫屬性；最后采用Vue結合Css3來實現輪播圖即可。

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

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

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

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

注意在HTML中，這里<img>有一個v-if="shoudShow"屬性。shouldShow這個屬性是在data(){}中設置的，當shouldShow從false-->true時（即img從無到突然出現時），

Vue動畫原理將動畫分為了 shouldShouldMove-enter 和 imgShouldMove-enter-active 兩個階段。

其中 shouldShouldMove-enter 表示動畫開始的初始狀態， imgShouldMove-enter-active 這表示動畫的終止狀態。而動畫的觸發則是通過if-show引起的。

示例：

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>

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

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

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

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

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

computed:{ 
 prevIndex(){ 
 //經過一番計算過程得出result 
 return result //這個值即<template>中的prevIndex 
 } 
 },

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

我們在計算屬性中對 this.direction 進行了設置，并在<template>中對相應的name進行了字符串拼接，如下

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

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

看完了這篇文章，相信你對如何使用vue.js實現輪播有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！