vue.jsを使用して簡単なカルーセルを実装する

私はしばらく vue.js を学習していましたが、非常に一般的なデモである ------- カルーセル チャートを作成しました。 JavaScript や jquery を使うと簡単ですし、Vue で書くのはとても面白いと思いました。簡単なアイデアについて話しましょう。v-if または v-show を使用して、画像カルーセルの元の JS スライドを置き換えます。トランジションを使用すると、2 つの画像が表示されるので、2 つ使用します。移行。

(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 の写真の配列に従って小さなドットの数をレンダリングし、スパンにバインドして小さなドットを光らせ、カスタム変数 ifshow で写真の表示と非表示を切り替えます表示するには、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 を変更することでカルーセル画像のステータスを変更します。スライド処理中に 2 つの画像が表示されるため、1 つを許可するために goto 関数に短いタイマーが設定されていることに注意してください。は表示され、もう 1 つは非表示になり、それぞれに異なるトランジション効果が適用されます。

りー

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