집 > 기사 > 웹 프론트엔드 > vue.js를 사용하여 캐러셀을 구현하는 방법

vue.js를 사용하여 캐러셀을 구현하는 방법

藏色散人원래의: 2020-12-08 09:30:545314검색

vue.js를 사용하여 캐러셀을 구현하는 방법: 먼저 "b7d6aa7d26bbcf1354a58cda375316e1"을 사용하여 해당 요소를 래핑한 다음 ".imgShoudMove"에서 애니메이션 속성을 설정합니다. 캐러셀 이미지를 구현하는 CSS3입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.0&&css3 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

이 글에서는 CSS3와 결합된 Vue를 사용하여 캐러셀 차트를 구현합니다.

가장 먼저 이해해야 할 것은 Vue의 애니메이션 원리입니다. Vue에서 요소에 애니메이션을 적용하려면 다음과 같이 b7d6aa7d26bbcf1354a58cda375316e16087faffb1c3f26530d25a6b190c2f81을 사용하여 해당 요소를 래핑해야 합니다. animation 속성은 다음과 같이 imgShoudMove에 설정됩니다.

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

HTML에서는 여기에 a1f02c36ba31691bcfe87b2722de723b v-if="shoudShow" 속성이 있습니다. shouldShow 속성은 data(){}에 설정됩니다. shouldShow가 false에서 true로 변경되면(즉, img가 갑자기 아무 것도 나타나지 않는 경우)

Vue 애니메이션 원리는 애니메이션을 shouldShouldMove-enter와 imgShouldMove-enter-active로 나눕니다. 두 단계.

여기서 shouldShouldMove-enter는 애니메이션이 시작될 때의 초기 상태를 나타내고, imgShouldMove-enter-active는 애니메이션의 종료 상태를 나타냅니다. 애니메이션은 if-show를 통해 트리거됩니다.

예:

HTML 코드:

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

애니메이션 관련 CSS 코드는 다음과 같습니다

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="&#39;carousel-trans-&#39; + direction + &#39;-old&#39;">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="&#39;carousel-trans-&#39; + 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:&#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>

참고: a1f02c36ba31691bcfe87b2722de723b의 경우 a8a2d94ad6460784ca7a88c66ac1760a 안에 배치해야 하며, a8a2d94ad6460784ca7a88c66ac1760a position:relative; 및 a1f02c36ba31691bcfe87b2722de723b는 position:absolute;로 설정되어야 합니다. 이 단계는 매우 중요합니다. 그렇지 않으면 매번 하나의 그림만 표시됩니다.

전환할 때마다 goto() 메서드가 실행되어야 하며, 먼저 this.isShow를 false로 설정해야 하며 10밀리초 후에는 this.isShow를 true로 설정해야 합니다. 이때 HTML의 300ff3b250bc578ac201dd5fb34a0004이 트리거되며 이는 CSS와 결합되어 애니메이션 효과를 트리거합니다. 지속 시간은 CSS 속성의 전환에 의해 설정됩니다.

앞으로 및 뒤로 전환할 때 계산된 속성이 사용됩니다. div.prevBtn 및 div.nextBtn에서는 클릭 이벤트를 바인딩하여 goto() 메서드를 트리거하고 계산된 속성 prevIndex가 전달됩니다. , @click="goto (prevIndex)"

계산된 속성의 설정 방법은 다음과 같습니다.

.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出去 
}

2초마다 자동으로 슬라이드하면 왼쪽으로 슬라이드됩니다. 데이터에서는 변수 방향이 설정되며 그 값은 문자열 ' 왼쪽으로' 또는 '오른쪽으로'.

계산된 속성에 this.direction을 설정하고 다음과 같이 해당 이름을 d477f9ce7bf77f53fbcf36bec1b69b7a의 문자열과 연결했습니다.

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },

vue에서는 클래스 및 스타일 외에도 객체 및 배열을 다른 속성으로 전달할 수 있습니다. 바인딩은 문자열로 연결되어야 합니다.

vue.js를 사용하여 캐러셀을 구현하는 방법

관련 기사