Vue 過渡實現輪播圖

Vue 過渡

Vue 的過渡系統是內置的，在元素從 DOM 中插入或移除時自動應用過渡效果。

過渡的實現要在目標元素上使用 transition 屬性，具體實現參考Vue2 過渡

下面例子中我們用到列表過渡，可以先學習一下官方的例子

要同時渲染整個列表，比如使用 v-for，我們需要用到 <transition-group> 組件

Vue 輪播圖

demo
我們先看這樣一個列表

<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" ><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" ><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" ><img :src="list.image" :alt="list.desc"></a> </li>

實例中的方法：

created() {//在DOM加載完成后，下個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-to {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: {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}}},created() {this.$nextTick(() => {this.timer = setInterval(() => {this.autoPlay()}, 4000)})} })

以上就是 Vue 過渡實現的輪播圖，喜歡的話請關注，點贊，收藏~謝謝

總結

以上是生活随笔為你收集整理的Vue 过渡实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。