内蒙天气预报,2011湖南高考数学,画家林凡
今天在上慕课老师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(()=>{
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的轮播图组件实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论