vue.js でカルーセル画像を作成できますか?-Vue.js-php.cn

vue.js でカルーセル画像を作成できますか?

藏色散人

リリース： 2020-12-17 10:45:36

オリジナル

2101 人が閲覧しました

vue.js はカルーセル画像を作成できます. 実装方法は、まず全体のフレームワークを記述し、imgArray の写真の配列に従って小さなドットの数をレンダリングし、その小さなドットにスパンをバインドします。最後に、カスタム変数 ifshow を使用して画像の表示と非表示を表示し、nowindex を設定してカルーセルを制御します。

vue.js でカルーセル画像を作成できますか?

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

関連する推奨事項: "vue.js チュートリアル"

私は最近 vuejs を学び、 vuejs を使用して簡単な画像カルーセルを作成しようとしました。簡単な記録

(1) まず全体の枠組みを書きます

<template>
<div class="slide-show">
<div 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>
</div>
</div>
</template>

ログイン後にコピー

写真のimgArrayの配列に基づいて小さなドットの数をレンダリングし、スパンの小さな円にバインドします。点灯状態では、写真の表示と非表示はカスタム変数 ifshow によって表示され、nowindex はカルーセルに対応する写真を制御します。

(2) カルーセル画像の配列がローカル画像であり、静的ファイルの下に配置されていない場合は、パスを require で丸で囲んでください。そうでない場合、パスはエラーを報告します。バックエンドサーバーから取得した場合は不要です。

data(){
return{
imgArray: [
require(&#39;../../img/item_01.png&#39;),
require(&#39;../../img/item_02.png&#39;),
require(&#39;../../img/item_03.png&#39;),
require(&#39;../../img/item_04.png&#39;)
]
}
}

ログイン後にコピー

(3) カスタム変数nowindexを変更することでカルーセル画像の状態を変更するのが主な目的ですが、スライド処理中に2枚の画像が表示されるため、短いタイミングで設定されています。このデバイスでは、一方を表示し、もう一方を非表示にすることができ、それぞれに異なるトランジション効果を追加できます。

<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
 
},
timerun(){
 let that = this;
 setInterval(function(){
 that.goto(that.nextindex)
 },2000)
 }
}
}
</script>

ログイン後にコピー

ここで、この単純なカルーセル画像は終了します。

以上がvue.js でカルーセル画像を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。