vue.js를 사용하여 간단한 캐러셀 구현

오랫동안 vue.js를 배워서 익숙해지려고 작은 데모를 만들었습니다. ------- vue를 배우기 전에는 캐러셀 차트가 매우 사용하기 쉬웠습니다. JavaScript나 jquery를 사용하면 간단하고 Vue로 작성하는 것이 꽤 흥미로웠습니다. 간단한 아이디어에 대해 이야기해 보겠습니다. v-if 또는 v-show를 사용하여 이미지 캐러셀의 원래 JS 슬라이딩을 대체하면 전환 효과를 쉽게 얻을 수 있으므로 슬라이딩 프로세스 중에 두 개의 그림을 볼 수 있습니다. 두 개의 전환을 사용합니다.

(1) 먼저 전체 프레임워크를 작성합니다

<template>
<p class="slide-show">
<p class="slide-img">
<transition name="slide-trans" >
<img v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39;>
</transition>
<transition name="slide-trans-old">
         <img v-if="!ifshow" :src="imgArray[nowindex]">
       </transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</p>
</p>
</template>

imgArray의 사진 배열에 따라 작은 점의 수를 렌더링하고, 범위를 바인딩하여 작은 점을 밝게 하고, 사용자 정의 변수를 통해 사진을 표시하고 숨깁니다. show를 표시하면 nowindex가 캐러셀에 해당하는 사진을 제어합니다.

(2) 캐러셀 이미지 배열이 로컬 이미지이고 정적 파일 아래에 배치되지 않은 경우 require로 경로에 동그라미를 치십시오. 그렇지 않으면 경로에서 오류가 보고됩니다. 백엔드 서버에서 얻은 경우에는 필요하지 않습니다.

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3) 주로 맞춤 변수 nowindex를 변경하여 캐러셀 이미지의 상태를 변경합니다. 슬라이딩 프로세스 중에 두 개의 이미지가 표시될 수 있으므로 goto 기능에 짧은 타이머가 설정되어 하나의 이미지가 허용됩니다. 표시되고 다른 하나는 숨겨지며 각각 다른 전환 효과를 갖습니다.

위 내용은 vue.js를 사용하여 간단한 캐러셀 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!