vue.jsを使用してカルーセルを実装する方法-Vue.js-php.cn

vue.js を使用してカルーセルを実装する方法: まず、「」を使用して対応する要素をラップし、次に「.imgShoudMove」でアニメーションのプロパティ。最後に Vue と CSS3 を組み合わせてカルーセルチャートを実装します。

vue.jsを使用してカルーセルを実装する方法

#このチュートリアルの動作環境: Windows7 システム、vue2.0&&css3 バージョン、Dell G3 コンピューターこの方法はすべてのブランドに適していますコンピュータの。

この記事では、Vue と CSS3 を組み合わせてカルーセルチャートを実装します。

最初に理解する必要があるのは、Vue のアニメーション原理です。 vue で要素をアニメーション化したい場合は、次のようにを使用して対応する要素をラップする必要があります:

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

ログイン後にコピー

その後、次のように、.imgShoudMove でアニメーション属性を設定できます:

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

ログイン後にコピー

HTML では、ここでには v-if="shoudShow" 属性があることに注意してください。属性 shouldShow は data(){} に設定されます。 shouldShow が false から true に変化するとき (つまり、何もないところから img が突然現れるとき)、

Vue アニメーション原則はアニメーションを shouldShouldMove に分割します。ステージ: Enter および imgShouldMove-enter-active。

shouldShouldMove-enter はアニメーションの初期状態を表し、imgShouldMove-enter-active はアニメーションの終了状態を表します。アニメーションは if-show を通じてトリガーされます。

例:

HTML コード:

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

ログイン後にコピー

アニメーションに関連する CSS コードは次のとおりです

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

ログイン後にコピー

注: の場合は、に配置するには、をposition:relative; に設定し、 vue.jsを使用してカルーセルを実装する方法

をposition:absolute; に設定する必要があります。このステップは非常に重要です。そうしないと、画像が 1 枚だけになってしまいます。毎回不可解に表示されます。

切り替えるたびに、goto() メソッドがトリガーされる必要があり、最初に this.isShow が false に設定され、10 ミリ秒後に this.isShow が true に設定されます。このとき、HTML 内のがトリガーされ、CSS と組み合わせてアニメーション効果がトリガーされます (持続時間は CSS 属性のトランジションによって設定された 0.5 秒)。

前後に切り替えるとき、計算された属性が使用されます。div.prevBtn と div.nextBtn では、メソッド goto() をトリガーするためにクリックイベントをバインドし、受信する正の属性は計算された属性 prevIndex です。 @click="goto(prevIndex)"

計算された属性の設定方法は次のとおりです。

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

ログイン後にコピー

2秒ごとに自動でスライドする場合、データ内で左にスライドします。変数の方向が設定され、その値は文字列「toleft」または「toright」のいずれかになります。

計算された属性に this.direction を設定し、次のように対応する名前を