image.png
先來展示一個簡單的效果。好吧，從這里啥也看不出來，就是一張圖上面有幾個點而已。想看到demo還是移步這里吧點擊
這僅僅是一個最簡單的輪播圖效果，如果用jq我想大家是駕輕就熟，用vue該怎么實現呢（悄悄告訴你們比jq簡單多了）？
分析步驟
- 首先我們把html框子搭出來
- 然后控制圖片的
v-show決定顯示的圖片（這里可以在data里面定義一個currentPage來表示當前顯示的輪播圖的index，只要index === currentPage則v-show為true否則為false） - 然后同樣利用currentPage這個變量控制按鈕的class表示高亮
- 綁定底部按鈕的click事件，當點擊的時候currentPage變成被點擊的按鈕的index值
- 最后把圖片的外框元素用
transition-group替換（這里不要忘記設置tag和name兩個屬性來規定渲染元素和動畫的名稱）
實踐
- 搭建html結構
<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 為整個焦點圖的外框，上面綁定兩個事件mouseenter和mouseleave，目的是為了劃過焦點圖的時候停止動畫；slider是輪播的圖片的外框；循環imgs，生成li，并定義v-show決定顯示的圖片；dot里面放下面的按鈕
- 利用
v-show顯示圖片（當index===currentPage的時候顯示該張圖片），并綁定click事件，來改變顯示的圖片
data () {
return {
currentPage: 0
}
}，
methods: {
changeSilder (index) {
this.currentPage = index
}
}
- 補充切換的動畫
.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讓焦點圖自動輪播，并在劃過的時候停止，如果需要看到具體的實現demo里面都有哦
