Vue的轮播图组件实现方法
|
今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。 本文章采用Vue结合Css3来实现轮播图。首先要了解的是Vue的动画原理。在vue中，如果我们要给元素设置动画效果，则需要使用一个 之后，便可以在.imgShoudMove中设置动画属性了，如下: 注意在HTML中，这里 我本人对其的理解为，其中 shouldShouldMove-enter 表示动画开始的初始状态， imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。 如下图
了解了这些之后，我就可以开始着手实现轮播图组件了。 首先是HTML代码： true
取反后: true -> false(从显示到消失) -->
{{pics[currentIndex].title}}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(){ 与动画相关的css代码如下 ---------------以下为解释说明-------------注意：对于 在每次切换的时候，都要触发goto()方法，将this.isShow先置false，10毫秒后，this.isShow置true。这时，html中的 在向前、向后切换的时候，使用到了计算属性，在div.prevBtn以及div.nextBtn上，我们作了点击事件绑定，触发方法goto(),而传入的正是计算属性prevIndex， @click="goto(prevIndex)" 计算属性的设定方法如下：中的prevIndex
}
},
每隔2秒自动滑动时，我们向left滑动，在data中，设定了变量 direction ，它的值要么为字符串'toleft'，要么为'toright'。 我们在计算属性中对 this.direction 进行了设置，并在中对相应的name进行了字符串拼接，如下 在vue中，除了class和style可以传入对象、数组，其他的属性绑定必须进行字符串拼接。 以上这篇Vue的轮播图组件实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
