Home > Web Front-end > JS Tutorial > body text

How to use Vue's carousel component

php中世界最好的语言
Release: 2018-04-12 13:49:49
Original
2630 people have browsed it

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 to wrap the corresponding element, as follows:

<transition> 
 <img  alt="How to use Vue's carousel component" > 
</transition>
Copy after login

After that, you can set the animation properties in .imgShoudMove, as follows:

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

Note that in HTML, How to use Vue's carousel component 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

How to use Vues carousel component

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>
Copy after login

Script code:

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:&#39;toleft&#39;
 }
 },
 computed:{
 prevIndex(){
 this.direction = &#39;toleft&#39;
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = &#39;toright&#39;
 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 = &#39;toright&#39;
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>
Copy after login

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出去 
}
Copy after login

---------------The following is an explanation-------------

Note: How to use Vue's carousel component needs to be placed inside , needs to be set to position:relative; And How to use Vue's carousel component must be set to position:absolute; This step is very, very important, otherwise only one picture will be displayed inexplicably every time.

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 in the HTML is triggered, which is combined with the CSS to trigger the animation effect. The duration is 0.5s set by the transition in the CSS attribute.

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>
Copy after login

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

<transition></transition>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!