Vue 過渡實(shí)現(xiàn)輪播圖效果
Vue 過渡
Vue 的過渡系統(tǒng)是內(nèi)置的,在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。
過渡的實(shí)現(xiàn)要在目標(biāo)元素上使用 transition 屬性,具體實(shí)現(xiàn)參考Vue2 過渡
下面例子中我們用到列表過渡,可以先學(xué)習(xí)一下官方的例子
要同時(shí)渲染整個(gè)列表,比如使用 v-for,我們需要用到 <transition-group> 組件
Vue 輪播圖
我們先看這樣一個(gè)列表
<ul> <li v-for="list in slideList"> <img :src="list.image" :alt="list.desc"> </li> </ul>
這個(gè)列表要從實(shí)例(見文章末尾)中獲取了三張圖片,要使其中的圖片產(chǎn)生輪播,我們需要用 <transition-group> 組件替換其中的 ul 標(biāo)簽,從而實(shí)現(xiàn)過渡組件的功能,完整的組件 DOM 內(nèi)容如下,下面分段解釋一下
<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>
對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)如下:
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 時(shí),應(yīng)給對(duì)應(yīng)的元素綁定一個(gè) key 屬性,相當(dāng)于 index 標(biāo)識(shí),在 <transition-group> 組件中,key 是必須的,這樣一個(gè)輪播圖的 DOM 結(jié)構(gòu)就完成了
接下來我們看看輪播函數(shù)的實(shí)現(xiàn),再來看組件中的 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 列表,并在其中插入了包含可點(diǎn)擊跳轉(zhuǎn)的圖片,接下來看看如何實(shí)現(xiàn)輪播,輪播圖的樣式直接在后面給出大家 sass 代碼,父元素 ul 設(shè)置 position: relative;overflow: hidden
后,li 大小設(shè)為和父元素相同,absolute 定位固定在父元素中,要讓 li 按照順序顯示,需要用到 v-show 或 v-if 處理,通過 index 值來改變當(dāng)前顯示的 li ,本例 v-show 綁定條件 index===currentIndex
,用定時(shí)器改變 currentIndex 實(shí)現(xiàn)輪播
<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>
實(shí)例中的方法:
//在下個(gè)tick執(zhí)行等待圖片加載完成后再 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 中為每個(gè)輪播 li 元素綁定事件 @mouseenter="stop" @mouseleave="go"
事件,使輪播鼠標(biāo)移入時(shí)停止,移出時(shí)再次開始。
輪播圖現(xiàn)在位置指示,綁定類名 active 改變顏色,綁定 change() 方法,鼠標(biāo)移到指示點(diǎn)時(shí)跳轉(zhuǎn)輪播圖
<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; } }
滑動(dòng)動(dòng)畫設(shè)置,知識(shí)點(diǎn)詳見 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 實(shí)例如下
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 過渡實(shí)現(xiàn)的輪播圖,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片
- Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動(dòng)輪播高亮顯示
- Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
- vue-music 使用better-scroll遇到輪播圖不能自動(dòng)輪播問題
- 使用Vue制作圖片輪播組件思路詳解
- 基于vue.js實(shí)現(xiàn)圖片輪播效果
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類似輪播圖效果)
- vue中引用swiper輪播插件的教程詳解
- Vue實(shí)現(xiàn)首頁banner自動(dòng)輪播效果
相關(guān)文章
Electron+vue從零開始打造一個(gè)本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個(gè)本地播放器的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10vue-cli3 取消eslint校驗(yàn)代碼的解決辦法
這篇文章主要介紹了vue-cli3 取消eslint校驗(yàn)代碼的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01Vue項(xiàng)目history模式下微信分享爬坑總結(jié)
這篇文章主要介紹了Vue項(xiàng)目history模式下微信分享爬坑總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Vue打包部署到Nginx時(shí),css樣式不生效的解決方式
這篇文章主要介紹了Vue打包部署到Nginx時(shí),css樣式不生效的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù),當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時(shí),就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句,實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決
這篇文章主要介紹了使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09