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

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

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

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

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

<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 では、ここで a1f02c36ba31691bcfe87b2722de723b には 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出去 
}

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

切り替えるたびに、goto() メソッドがトリガーされる必要があり、最初に this.isShow が false に設定され、10 ミリ秒後に this.isShow が true に設定されます。このとき、HTML 内の 300ff3b250bc578ac201dd5fb34a0004 がトリガーされ、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 を設定し、次のように対応する名前を d477f9ce7bf77f53fbcf36bec1b69b7a 内の文字列と連結しました

<transition v-bind:name="&#39;carousel-trans-&#39; + direction ">

vue では、クラスとスタイルに加えて渡すことができますオブジェクトと配列内、およびその他の属性バインディングは文字列で結合する必要があります。

推奨: 「

vue チュートリアル 」

以上がvue.jsを使用してカルーセルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。