Vue的轮播图组件实现

今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。

本文章采用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">        <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>    <h2>{{pics[currentIndex].title}}</h2>    <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可以传入对象、数组，其他的属性绑定必须进行字符串拼接。