Vue的轮播组件怎么使用-js教程-PHP中文网

这次给大家带来Vue的轮播组件怎么使用，使用Vue轮播组件的注意事项有哪些，下面就是实战案例，一起来看一下。

本文章采用Vue结合css3来实现轮播图。

首先要了解的是Vue的动画原理。在vue中，如果我们要给元素设置动画效果，则需要使用一个将相应的元素包裹住，如下：

之后，便可以在.imgShoudMove中设置动画属性了，如下:

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

注意在HTML中，这里 Vue的轮播组件怎么使用有一个v-if="shoudShow"属性。shouldShow这个属性是在data(){}中设置的，当shouldShow从false-->true时（即img从无到突然出现时），Vue动画原理将动画分为了 shouldShouldMove-enter 和 imgShouldMove-enter-active 两个阶段。

我本人对其的理解为，其中 shouldShouldMove-enter 表示动画开始的初始状态， imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。

如下图

Vue的轮播图组件实现方法

了解了这些之后，我就可以开始着手实现轮播图组件了。

首先是HTML代码：

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出去 
}

---------------以下为解释说明-------------

注意：对于 Vue的轮播组件怎么使用需要放在里面，需要设置为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 //这个值即

Vue的轮播组件怎么使用

{{pics[currentIndex].title}}