回転チャート
最初にページをレイアウト
<!-- マウスが通過したら自動再生を停止する -->
<div class="banner" id="banner" @mouseover="stopPlay()" @mouseleave="autoPlay()">
<!-- 写真を表示する -->
<a href="#">
<!-- 現在表示されているイメージのインデックスに従って、対応するデータを取得する-->
<img :src="imgs[currentIndex].src" class="banner-slide slide-active" />
</a>
<!-- 左右矢印 -->
<a href="javascript:void(0)" class="button prev" id="prev" @click="prevClick()"></a>
<a href="javascript:void(0)" class="button next" id="next" @click="nextClick()"></a>
<!-- -->
<div class="dots" id="dots">
<template v-for="(item, index) in imgs">
<!-- 現在のドットのインデックスがcurrentIndexと等しい場合に、アクティブなクラスを追加する。 -->
<!-- ドットをクリックしてイメージを切り替え、現在のインデックスを渡し、currentIndexをindexに変更する。 -->
<span :key="item.id" :class="{ active: currentIndex == index }" @click="goPage(index)"></span>
</template>
</div>
</div>currentIndexは現在の表示写真のインデックスで、デフォルトは0です。
//イメージアドレス
imgs: [
{
id: 0,
src:
'https://....-./-/.?=&;=&;=&;=&;=90',
},
],
//現在表示されているイメージのインデックス
currentIndex: 0,
//
timer: null,ページが正常にマウントされた後、mountedの自動回転関数を呼び出します。
mounted() {
this.autoPlay()
},
上下の矢印をクリックしてイメージを切り替え、currentIndexを変更します。
nextClick() {
//現在のインデックスはイメージの数に等しい-1このイベントは、最後の写真に到達したときにトリガーされる。
//次に、currentIndexに0を代入し、最初のものとして設定する。
もし（この.currentIndex == this.imgs.length - 1) {
this.currentIndex = 0
} else {
//currentIndex+1
this.currentIndex = this.currentIndex + 1
}
},
prevClick() {
//現在のインデックスが0になると、最初のマップに到達し、イベントがトリガーされる。
//そして、currentIndexにイメージの数を代入する。-1もし(this)が最後のシートに設定されていれば、(this)は最後のシートに設定される。
もし（this.currentIndex == 0) {
this.currentIndex = this.imgs.length - 1
} else {
//currentIndex-1
this.currentIndex = this.currentIndex - 1
}
},自動再生機能の停止
stopPlay() {
clearInterval(this.timer)
// console.log(1);
},
点をクリックするとイメージが切り替わります
//現在のインデックスを渡し、currentIndexをindexに変更する。
ゴーページ {
this.currentIndex = index
},メニューバー
レイアウト
<!-- 左メニューバー -->
<!-- categoryitemactive:マウスオーバーのスタイル category-itemデフォルト・スタイル-->
<!-- currentId現在選択されているメニュー項目のidインデックス -->
<ul class="site-list clearfix">
<li
:class="{ 'category-item': true, categoryitemactive: currentId == index ? true : false }"
v-for="(item, index) in list"
:key="item.id"
@mouseover="showList(item.id)"
@mouseleave="hideList()"
>
<a href="#" class="title">
{{ item.msg }}
<em class="iconfont-arrow-right-big">></em>
</a>
</li>
</ul>
<!-- //メニューバーにマウスオーバーすると内容が表示される -->
<div v-show="show" class="show" @mouseover="showDetail()" @mouseleave="hideDetail()">
<h1 v-for="item in details" :key="item.id">{{ item.msg }}</h1>
</div>データ
data() {
return {
list: [
{
id: 0,
msg: '携帯電話 テレホンカード',
},
],
//現在のメニューバーに表示されているデータのID
currentId: 0,
show: false,
//左メニューバー背景色クラス
//categoryitem: 'category-item',
// details:[]
}
},マウスがメニュー・アイテムの上を通過したときに、idを渡し、currentIdをidに設定し、詳細カラムを表示し、詳細カラムのデータを計算された属性に設定し、currentIdに従ってデータをフィルタリングしてから戻り、詳細カラムの表示を渡します。
showList(id) {
this.show = true
this.currentId = id
// console.log(id, this.currentId);
},
computed: {
//メニューバーにマウスオーバーすると、対応するデータが保存される
details: function () {
// console.log(this.currentId);
return this.list.filter((item) => item.id == this.currentId)
},
},マウスオーバーで非表示
hideList() {
this.show = false
},
詳細バーの表示と非表示
//マウスオーバー表示
詳細を表示する {
this.show = true
},
//マウス・オーバーで隠す
hideDetail() {
this.show = false
//メニュー項目の選択スタイルをクリアする
this.currentId = undefined
},
