ホームページ > 記事 > ウェブフロントエンド > 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='ifshow' :src='imgArray[nowindex]'> </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 サイトの他の関連記事を参照してください。