Vueのカルーセルコンポーネントの使い方

今回は、Vue カルーセル コンポーネントの使い方と、Vue カルーセル コンポーネントを使用する際の注意事項について説明します。以下は実際のケースです。

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

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

<transition> 
 <img  alt="Vueのカルーセルコンポーネントの使い方" > 
</transition>

HTML では、 には v-if="shoudShow" 属性があることに注意してください。 shouldShow 属性は data(){} で設定されます。 shouldShow が false から true に変化するとき (つまり、img が何もないところから突然現れるとき)、Vue アニメーションの原則によりアニメーションが次のように分割されます。 shouldShouldMove-enter と imgShouldMove-enter-active の 2 つのステージがあります。

私自身の理解では、 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; に設定する必要があります。このステップは非常に重要です。そうしないと、不可解なことに、毎回 1 つの画像しか表示されなくなります。 各スイッチでは、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 では、

オブジェクト

と配列で渡すことができるクラスとスタイルに加えて、他の属性バインディングも文字列で結合する必要があります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

スワイパーコンポーネントを使用してカルーセル広告効果を実現

vue を使用して画像のマーキースクロールを実現

以上がVueのカルーセルコンポーネントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。