Vue의 캐러셀 컴포넌트를 사용하는 방법

이번에는 Vue 캐러셀 컴포넌트 사용 방법과 Vue 캐러셀 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

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

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

<transition> 
 <img  alt="Vue의 캐러셀 컴포넌트를 사용하는 방법" > 
</transition>

HTML에서는 에 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); 
}

스크립트 코드:

<template>
 <p>
 </p>
<p>
 <a>
 <transition>
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img  alt="Vue의 캐러셀 컴포넌트를 사용하는 방법" >
 </transition>
 <transition>
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img  alt="Vue의 캐러셀 컴포넌트를 사용하는 방법" >
 </transition>
 </a>
 </p>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul>
 <li>{{index + 1}}</li>
 </ul>
 <p><i></i></p>
 <p><i></i></p>
 </template>

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

<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>

---------------아래 설명------------ 참고: 는 안에 배치되어야 하며, 는

position

:relative;로 설정되어야 합니다. 그리고 는 position:absolute로 설정되어야 합니다. 이 단계는 매우 중요합니다. 그렇지 않으면 매번 설명할 수 없는 그림 하나만 표시됩니다. 각 스위치에서 goto() 메서드가 트리거되어야 하며 먼저 this.isShow를 false로 설정하고 10밀리초 후에 this.isShow가 true로 설정됩니다. 이때 HTML의 이 트리거되며 이는 CSS와 결합되어 애니메이션 효과를 트리거합니다. 지속 시간은 CSS 속성의 전환에 의해 설정됩니다.

앞으로 및 뒤로 전환할 때 계산된 속성이 사용됩니다. p.prevBtn 및 p.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초마다 자동으로 슬라이드하면 왼쪽으로 슬라이드하게 되는데, 데이터에는 변수 방향이 설정되어 있고 그 값은

string

'toleft' 또는 'toright'입니다. 계산된 속성에 this.direction을 설정하고 다음과 같이

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

vue에서는

objects

및 배열로 전달할 수 있는 클래스 및 스타일 외에도 다른 속성 바인딩을 문자열로 연결해야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

스와이프 구성요소를 사용하여 캐러셀 광고 효과를 얻으세요.

vue를 사용하여 이미지의 윤곽 스크롤을 얻으세요

위 내용은 Vue의 캐러셀 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!