This time I will show you how to use the Vue carousel component, and what are the precautions when using the Vue carousel component. The following is a practical case, let's take a look.
This article uses Vue combined with css3 to realize the carousel chart.
The first thing to understand is the animation principle of Vue. In vue, if we want to animate an element, we need to use a
<transition> <img alt="How to use Vue's carousel component" > </transition>
After that, you can set the animation properties in .imgShoudMove, as follows:
.imgShouldMove-enter{ transition: all 0.5s; } .imgShouldMove-enter-active{ transform:translateX(900px); }
Note that in HTML, has a v-if="shoudShow" attribute. The attribute shouldShow is set in data(){}. When shouldShow changes from false to true (that is, when img suddenly appears from nothing), the Vue animation principle divides the animation into There are two stages: shouldShouldMove-enter and imgShouldMove-enter-active.
My own understanding of it is that shouldShouldMove-enter represents the initial state when the animation starts, and imgShouldMove-enter-active represents the termination state of the animation. The animation is triggered through if-show.
As shown below
After understanding this, I can start to implement the carousel component.
The first is the HTML code:
<template> <p> </p> <p> <a> <transition> <!-- isShow: false -> true 取反后: true -> false(从显示到消失) --> <img alt="How to use Vue's carousel component" > </transition> <transition> <!-- isShow: false -> true --> <!-- 从消失到显示 --> <img alt="How to use Vue's carousel component" > </transition> </a> </p> <h2>{{pics[currentIndex].title}}</h2> <ul> <li>{{index + 1}}</li> </ul> <p><i></i></p> <p><i></i></p> </template>
Script code:
<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>
The css code related to animation is as follows
.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出去 }
---------------The following is an explanation-------------
Note: needs to be placed inside
At each switch, the goto() method must be triggered, setting this.isShow to false first, and after 10 milliseconds, this.isShow is set to true. At this time, the
When switching forward and backward, calculated properties are used. On p.prevBtn and p.nextBtn, we bind click events to trigger the method goto(), and the calculated property prevIndex is passed in, @ click="goto(prevIndex)"
The setting method of calculated attributes is as follows:
computed:{ prevIndex(){ //经过一番计算过程得出result return result //这个值即<template>中的prevIndex } },</template>
When automatically sliding every 2 seconds, we slide to the left. In the data, the variable direction is set, and its value is either string'toleft' or 'toright'.
We set this.direction in the calculated attribute, and performed string concatenation on the corresponding name in , as follows
<transition></transition>
In vue, in addition to class and style, which can be passed in objects and arrays, other attribute bindings must be string spliced.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Use swiper component to achieve carousel advertising effect
vue implements marquee scrolling of images
The above is the detailed content of How to use Vue's carousel component. For more information, please follow other related articles on the PHP Chinese website!