Vue的轮播图组件实现方法
分类:Vue作者:编程之家
今天在上老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑。此外,在原课程案例的基础上,我加入了不同方向的滑动功能。
本文章采用Vue结合Css3来实现轮播图。
首先要了解的是Vue的动画原理。在vue中,如果我们要给元素设置动画效果,则需要使用一个将相应的元素包裹住,如下:
rush:xhtml;">
之后,便可以在.imgShoudMove中设置动画属性了,如下:
rush:xhtml;">
.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代码:
rush:xhtml;">
{{pics[currentIndex].title}}
Script代码:
rush:xhtml;">
与动画相关的css代码如下
rush:xhtml;">
.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。
在向前、向后切换的时候,使用到了计算属性,在div.prevBtn以及div.nextBtn上,我们作了点击事件绑定,触发方法goto(),而传入的正是计算属性prevIndex, @click="goto(prevIndex)"
rush:xhtml;">
co
mputed:{
prevIndex(){
//经过一番计算过程得出result
return result //这个值即
中的prevIndex
}
},
每隔2秒自动滑动时,我们向left滑动,在data中,设定了变量 direction ,它的值要么为字符串'toleft',要么为'toright'。
我们在计算属性中对 this.direction 进行了设置,并在中对相应的name进行了字符串拼接,如下
rush:xhtml;">
在vue中,除了class和style可以传入对象、数组,其他的属性绑定必须进行字符串拼接。
以上这篇Vue的轮播图组件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/33415.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。