今天接到一個(gè)寫輪播圖的需求装诡，話不多說润脸，直接開寫：
html部分
<template>
<div class="carousel-container">
<header>輪播圖</header>
<section @mouseenter="_stop" @mouseleave="_begin">
<ul class="carousel-text" @click="changePic">
<li
:class="{active: currentIndex === index}"
v-for="(item, index) in carouselList"
:data-index="index"
:key="index">
{{item.text}}
</li>
</ul>
<transition-group tag="ul" class='carousel-img-container' name="fade">
<li v-for="(item, index) in carouselList"
:key="index"
v-show="index===currentIndex">
<img :src="item.src" :alt="item.text" class="carousel-img">
</li>
</transition-group>
</section>
</div>
</template>
核心是使用
transition-group怔球，這是vue提供的動(dòng)畫切換組件邢羔，我們可以通過這個(gè)組件方便地實(shí)現(xiàn)輪播圖圖片動(dòng)畫的各種切換效果驼抹，當(dāng)然，如果不用這個(gè)組件拜鹤，也可以通過css動(dòng)畫來完成框冀，代碼會(huì)復(fù)雜一點(diǎn)，但也是可以實(shí)現(xiàn)的敏簿。
js部門
代碼不多明也，就直接貼上來了：
export default {
name: 'c-carousel',
data () {
return {
/**
* 圖片src
*/
src: require('@/assets/images/D2.1_1@2x.png'),
/**
* 輪播圖數(shù)據(jù)
*/
carouselList: [
{
text: '1. 第一張圖片',
src: require('@/assets/images/D2.1_1@2x.png')
},
{
text: '2. 第二張圖片',
src: require('@/assets/images/D2.1_2.png'),
},
{
text: '3. 第三張圖片',
src: require('@/assets/images/D2.1_3.png'),
}
],
/**
* 當(dāng)前正在顯示的圖片
*/
currentIndex: 0,
/**
* 切換圖片定時(shí)器
*/
carouselTimer: null
}
},
mounted () {
this._begin()
},
methods: {
/**
* 點(diǎn)擊切換圖片
*/
changePic (e) {
this.currentIndex = parseInt(e.target.dataset.index)
},
/**
* 定時(shí)切換圖片
*/
autoPlay () {
this.currentIndex++
if (this.currentIndex >= this.carouselList.length) {
this.currentIndex = 0
}
},
/**
* 開始定時(shí)切換圖片
*/
_begin () {
this.carouselTimer = setInterval (this.autoPlay, 4000)
},
/**
* 停止定時(shí)切換圖片
*/
_stop () {
clearInterval(this.carouselTimer)
}
}
}
因?yàn)槭褂玫氖?code>nuxt宣虾，所以圖片的引入需要用
require, nuxt 的好處就是有利于SEO,輪播圖一般出現(xiàn)的場景是公司官網(wǎng)，對搜索引擎友好是必要條件温数，這是spa(單頁web應(yīng)用)無法達(dá)到的绣硝，而且nuxt預(yù)設(shè)了利用Vue.js開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，服務(wù)端渲染能大大提高網(wǎng)頁對加載速度
css部分核心代碼
.carousel-img-container {
overflow: hidden;
width: 100%;
position: relative;
li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
}
}
}
// 動(dòng)畫
.fade-enter-active, .fade-leave-active {
transition: all 2s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
transition: translateY(20px);
}
使用transition-group時(shí)遇到一個(gè)問題撑刺，當(dāng)添加和移除元素的時(shí)候鹉胖，周圍的元素會(huì)瞬間移動(dòng)到他們的新布局的位置，而不是平滑的過渡够傍，解決方案是所有圖片需要相對于容器絕對定位甫菠，讓每張圖片疊加在一起，然后再根據(jù)判斷條件顯示對應(yīng)的圖片王带，關(guān)于transition-group的其他詳細(xì)內(nèi)容請查看官方文檔
