image.png
先來展示一個(gè)簡(jiǎn)單的效果。好吧，從這里啥也看不出來，就是一張圖上面有幾個(gè)點(diǎn)而已。想看到demo還是移步這里吧點(diǎn)擊
這僅僅是一個(gè)最簡(jiǎn)單的輪播圖效果，如果用jq我想大家是駕輕就熟，用vue該怎么實(shí)現(xiàn)呢（悄悄告訴你們比jq簡(jiǎn)單多了）？
分析步驟
- 首先我們把html框子搭出來
- 然后控制圖片的
v-show決定顯示的圖片（這里可以在data里面定義一個(gè)currentPage來表示當(dāng)前顯示的輪播圖的index，只要index === currentPage則v-show為true否則為false） - 然后同樣利用currentPage這個(gè)變量控制按鈕的class表示高亮
- 綁定底部按鈕的click事件，當(dāng)點(diǎn)擊的時(shí)候currentPage變成被點(diǎn)擊的按鈕的index值
- 最后把圖片的外框元素用
transition-group替換（這里不要忘記設(shè)置tag和name兩個(gè)屬性來規(guī)定渲染元素和動(dòng)畫的名稱）
實(shí)踐
- 搭建html結(jié)構(gòu)
<template lang='pug'>
.slider-wrap
transition-group.slider(tag='ul' :name='vertical-image')
li.item(v-for='(item, index) in imgList' :key='index' v-show='index === currentPage')
img(:src='item.url')
.dot
span(v-for='(item, index) in imgList' :key='index' :class='{"active": index ===currentPage}' @click='changeSilder(index)')
</template>
解析：slider-wrap 為整個(gè)焦點(diǎn)圖的外框，上面綁定兩個(gè)事件mouseenter和mouseleave，目的是為了劃過焦點(diǎn)圖的時(shí)候停止動(dòng)畫；slider是輪播的圖片的外框；循環(huán)imgs，生成li，并定義v-show決定顯示的圖片；dot里面放下面的按鈕
- 利用
v-show顯示圖片（當(dāng)index===currentPage的時(shí)候顯示該張圖片），并綁定click事件，來改變顯示的圖片
data () {
return {
currentPage: 0
}
}，
methods: {
changeSilder (index) {
this.currentPage = index
}
}
- 補(bǔ)充切換的動(dòng)畫
.vertical-image-enter-active {
transform: translateX(0);
transition: all 1s ease;
}
.vertical-image-leave-active {
transform: translateX(-100%);
transition: all 1s ease;
}
.vertical-image-enter {
transform: translateX(100%);
}
.vertical-image-leave {
transform: translateX(0);
}
備注：可以利用setTimeout讓焦點(diǎn)圖自動(dòng)輪播，并在劃過的時(shí)候停止，如果需要看到具體的實(shí)現(xiàn)demo里面都有哦
