Vue 過渡
Vue 的過渡系統是內置的，在元素從 DOM 中插入或移除時自動應用過渡效果。
過渡的實現要在目標元素上使用 transition 屬性，具體實現參考Vue2 過渡
下面例子中我們用到列表過渡，可以先學習一下官方的例子
要同時渲染整個列表，比如使用 v-for，我們需要用到 <transition-group> 組件
Vue 輪播圖
我們先看這樣一個列表
<ul> <li v-for="list in slideList"> <img :src="list.image" :alt="list.desc"> </li></ul>
這個列表要從實例(見文章末尾)中獲取了三張圖片，要使其中的圖片產生輪播，我們需要用 <transition-group> 組件替換其中的 ul 標簽，從而實現過渡組件的功能，完整的組件 DOM 內容如下，下面分段解釋一下
<div class="carousel-wrap" id="carousel"> // 輪播圖列表 <transition-group tag="ul" class='slide-ul' name="list"> <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go"> <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img :src="list.image" :alt="list.desc"> </a> </li> </transition-group> // 輪播圖位置指示 <div class="carousel-items"> <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span> </div></div>對應的數據結構如下：
data: { slideList: [ { "clickUrl": "#", "desc": "nhwc", "image": "http://dummyimage.com/1745x492/f1d65b" }, { "clickUrl": "#", "desc": "hxrj", "image": "http://dummyimage.com/1745x492/40b7ea" }, { "clickUrl": "#", "desc": "rsdh", "image": "http://dummyimage.com/1745x492/e3c933" } ], currentIndex: 0, timer: ''},在使用 v-for 時，應給對應的元素綁定一個 key 屬性，相當于 index 標識，在 <transition-group> 組件中，key 是必須的，這樣一個輪播圖的 DOM 結構就完成了
接下來我們看看輪播函數的實現，再來看組件中的 li 元素
<li v-for="(list,index) in slideList" :key="index"> <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img :src="list.image" :alt="list.desc"> </a></li>
上面通過 v-for 渲染了 li 列表，并在其中插入了包含可點擊跳轉的圖片，接下來看看如何實現輪播，輪播圖的樣式直接在后面給出大家 sass 代碼，父元素 ul 設置 position: relative;overflow: hidden 后，li 大小設為和父元素相同，absolute 定位固定在父元素中，要讓 li 按照順序顯示，需要用到 v-show 或 v-if 處理，通過 index 值來改變當前顯示的 li ，本例 v-show 綁定條件 index===currentIndex，用定時器改變 currentIndex 實現輪播
<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go"> <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img :src="list.image" :alt="list.desc"> </a></li>
實例中的方法：
//在下個tick執行等待圖片加載完成后再this.$nextTick(() => { this.timer = setInterval(() => { this.autoPlay() },4000)}),go() { this.timer = setInterval(() => { this.autoPlay() },4000)},stop() { clearInterval(this.timer) this.timer = null},change(index) { this.currentIndex = index},autoPlay() { this.currentIndex++ if (this.currentIndex > this.slideList.length - 1) { this.currentIndex = 0 }}DOM 中為每個輪播 li 元素綁定事件 @mouseenter="stop" @mouseleave="go" 事件,使輪播鼠標移入時停止，移出時再次開始。
輪播圖現在位置指示，綁定類名 active 改變顏色，綁定 change() 方法，鼠標移到指示點時跳轉輪播圖
<div class="carousel-items"> <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span></div>sass 樣式代碼
.carousel-wrap { position: relative; height: 453px; width: 100%; overflow: hidden; // 刪除 background-color: #fff;}.slide-ul { width: 100%; height: 100%; li { position: absolute; width: 100%; height: 100%; img { width: 100%; height: 100%; } }}.carousel-items { position: absolute; z-index: 10; top: 380px; width: 100%; margin: 0 auto; text-align: center; font-size: 0; span { display: inline-block; height: 6px; width: 30px; margin: 0 3px; background-color: #b2b2b2; cursor: pointer; } .active { background-color: $btn-color; }}滑動動畫設置，知識點詳見 Vue 教程中的 過渡 css 類名
.list-enter-active { transition: all 1s ease; transform: translateX(0)}.list-leave-active { transition: all 1s ease; transform: translateX(-100%)}.list-enter { transform: translateX(100%)}.list-leave { transform: translateX(0)}完整 Vue 實例如下
new Vue({ el: '#carousel', data: { slideList: [ { "clickUrl": "#", "desc": "nhwc", "image": "http://dummyimage.com/1745x492/f1d65b" }, { "clickUrl": "#", "desc": "hxrj", "image": "http://dummyimage.com/1745x492/40b7ea" }, { "clickUrl": "#", "desc": "rsdh", "image": "http://dummyimage.com/1745x492/e3c933" } ], currentIndex: 0, timer: '' }, methods: { this.$nextTick(() => { this.timer = setInterval(() => { this.autoPlay() },4000) }) go() { this.timer = setInterval(() => { this.autoPlay() },4000) }, stop() { clearInterval(this.timer) this.timer = null }, change(index) { this.currentIndex = index }, autoPlay() { this.currentIndex++ if (this.currentIndex > this.slideList.length - 1) { this.currentIndex = 0 } } }})以上就是 Vue 過渡實現的輪播圖，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
