今天來(lái)做個(gè)幻燈組件的筆記，這里只記錄實(shí)現(xiàn)邏輯女责，不對(duì)樣式代碼做展示漆枚。
一個(gè)幻燈片組件需要實(shí)現(xiàn)的功能如下：
1、幻燈片的循環(huán)播放抵知；
2墙基、幻燈片分頁(yè)软族；
3、幻燈片標(biāo)題的顯示残制；
4立砸、鼠標(biāo)進(jìn)入，停止幻燈切換初茶；
5颗祝、鼠標(biāo)離開，繼續(xù)幻燈切換恼布；
6螺戳、點(diǎn)擊相應(yīng)幻燈，或幻燈標(biāo)題桥氏，觸發(fā)不同事件(根據(jù)實(shí)際需求做處理)温峭；
7、點(diǎn)擊頁(yè)碼字支，實(shí)現(xiàn)幻燈切換及循環(huán)播放凤藏。
效果如下：
具體步驟
第一步：新建slideShow.vue組件；
<template>
<div>hello world {{ x }}</div>
</template>
<script>
export default {
name: "slideShow",
data() {
return {
x : '我是slideShow'
}
}
}
</script>
第二步：在父組件中引入
// template
<div class="index-right">
<slide-show></slide-show>
</div>
// script
import slideShow from '../components/slideShow'
export default {
components: {
slideShow
},
data() {
return {
}
}
}
這時(shí)候可以看到效果：slideShow組件的內(nèi)容已被渲染到父組件
第三步：在父組件為幻燈片動(dòng)態(tài)綁定要顯示的內(nèi)容堕伪，并在子組件接收揖庄。
知識(shí)點(diǎn)：父、子組件通信欠雌。
父組件 ：template
<slide-show :slides="slides"></slide-show>
script :data
slides: [
{
src: require('../assets/slideShow/pic1.jpg'),
title: 'xxx1',
href: 'detail/analysis'
},
{
src: require('../assets/slideShow/pic2.jpg'),
title: 'xxx2',
href: 'detail/count'
},
{
src: require('../assets/slideShow/pic3.jpg'),
title: 'xxx3',
href: 'http://xxx.xxx.com'
},
{
src: require('../assets/slideShow/pic4.jpg'),
title: 'xxx4',
href: 'detail/forecast'
}
]
子組件蹄梢，這里限制了父組件傳參的類型
props: {
slides: {
type: Array,
default: []
}
},
mounted () {
console.log(this.slides)
}
這里可以看到，子組件接收到了父組件傳過(guò)來(lái)的參數(shù)
第四步：把父組件傳來(lái)的參數(shù)展示在模板富俄；
<template>
<div class="slide-show">
<div class="slide-img">
<a href="xxx">
<img :src="slides[0].src">
</a>
</div>
<h2>{{ slides[0].title }}</h2>
<ul class="slide-pages">
<li><</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>></li>
</ul>
</div>
</template>
效果如下
第五步：分頁(yè)禁炒，讓幻燈片切換
<template>
<div class="slide-show">
<div class="slide-img">
<a :href="slides[nowIndex].href">
<img :src="slides[nowIndex].src">
</a>
</div>
<h2>{{ slides[nowIndex].title }}</h2>
<ul class="slide-pages">
<li><</li>
<li v-for="(item, index) in slides" @click="goto(index)">
<a>{{ index + 1 }}</a>
</li>
<li>></li>
</ul>
</div>
</template>
methods: {
goto(index) {
this.nowIndex = index
}
},
實(shí)現(xiàn)頁(yè)碼上一頁(yè)、下一頁(yè)功能霍比；使用計(jì)算屬性幕袱，通過(guò)一個(gè)方法實(shí)現(xiàn)；
知識(shí)點(diǎn)：計(jì)算屬性悠瞬。
<li @click="goto(prevIndex)"><</li>
<li v-for="(item, index) in slides" @click="goto(index)">
<a :class="{on: index === nowIndex}">{{ index + 1 }}</a>
</li>
<li @click="goto(nextIndex)">></li>
computed: {
prevIndex () {
if (this.nowIndex === 0) {
return this.slides.length - 1
}
else {
return this.nowIndex - 1
}
},
nextIndex () {
if (this.nowIndex === this.slides.length - 1) {
return 0
}
else {
return this.nowIndex + 1
}
}
},
第六步：讓幻燈片自動(dòng)切換
父組件動(dòng)態(tài)傳參：幻燈片自動(dòng)切換時(shí)間間隔
<slide-show :slides="slides" :inv="invTime"></slide-show>
// 在data中注冊(cè)
invTime: 2000,
子組件
// props 注冊(cè)組件的動(dòng)態(tài)屬性
inv: {
type: Number,
default: 1000
}
// 添加 methods實(shí)現(xiàn)幻燈片切換
runInv () {
this.invId = setInterval(() => {
this.goto(this.nextIndex)
}, this.inv)
},
// 在mounted中調(diào)用方法
mounted () {
this.runInv();
}
第七步：鼠標(biāo)事件
// 在methods注冊(cè)一個(gè)清除切換的方法
clearInv () {
clearInterval(this.invId)
}
// 在根節(jié)點(diǎn)添加鼠標(biāo)時(shí)間
<template>
<div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
...
第八步：高級(jí)功能：圖片的動(dòng)畫效果
知識(shí)點(diǎn)：樣式標(biāo)簽transition的使用们豌；
難點(diǎn)：這里的兩個(gè)nowIndex一個(gè)是新值一個(gè)是舊值，在goto函數(shù)中改變浅妆。
// 幻燈片切換添加transition
<a :href="slides[nowIndex].href">
<transition name="slide-trans">
<img v-if="isShow" :src="slides[nowIndex].src">
</transition>
<transition name="slide-trans-old">
<img v-if="!isShow" :src="slides[nowIndex].src">
</transition>
</a>
// 為變量注冊(cè)初始值
isShow:true
// 修改goto函數(shù)
goto(index) {
this.isShow = false
setTimeout(() => {
this.isShow = true
this.nowIndex = index
}, 10)
},
// 添加樣式
.slide-trans-enter-active {
transition: all .5s;
}
.slide-trans-enter {
transform: translateX(900px);
}
.slide-trans-old-leave-active {
transition: all .5s;
transform: translateX(-900px);
}
第九步：子組件切換：觸發(fā)父組件的事件
知識(shí)點(diǎn)：子組件向父組件通信
// 所有的切換都是在goto函數(shù)中望迎，所以在goto函數(shù)調(diào)用事件$emit
goto(index) {
this.isShow = false
setTimeout(() => {
this.isShow = true
this.nowIndex = index
this.$emit('onChange',index)
}, 10)
},
// 在父組件的子組件標(biāo)簽中綁定事件
<slide-show :slides="slides" :inv="invTime" @onChange="doSomethingOnSlideChange"></slide-show>
// 在methods中實(shí)現(xiàn)綁定的事件
methods: {
doSomethingOnSlideChange() {
console.log('幻燈片切換了，父組件要做點(diǎn)什么')
}
},
