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" 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>
<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(()=>{
jquery自动轮播图代码
this.isShow = true
this.currentIndex = index
},10)
},
runInterval(){
this.direction = 'toright'
this.timer = setInterval(()=>{
<(Index)
},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以及Btn上，我们作了点击事件绑定，触发⽅法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的轮播图组件实现⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。