摘要:過渡實(shí)現(xiàn)輪播圖過渡的過渡系統(tǒng)是內(nèi)置的,在元素從中插入或移除時自動應(yīng)用過渡效果。
Vue 過渡實(shí)現(xiàn)輪播圖 Vue 過渡
Vue 的過渡系統(tǒng)是內(nèi)置的,在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。
過渡的實(shí)現(xiàn)要在目標(biāo)元素上使用 transition 屬性,具體實(shí)現(xiàn)參考Vue2 過渡
下面例子中我們用到列表過渡,可以先學(xué)習(xí)一下官方的例子
要同時渲染整個列表,比如使用 v-for,我們需要用到
demo
我們先看這樣一個列表
這個列表要從實(shí)例(見文章末尾)中獲取了三張圖片,要使其中的圖片產(chǎn)生輪播,我們需要用
對應(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 時,應(yīng)給對應(yīng)的元素綁定一個 key 屬性,相當(dāng)于 index 標(biāo)識,在
接下來我們看看輪播函數(shù)的實(shí)現(xiàn),再來看組件中的 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,用定時器改變 currentIndex 實(shí)現(xiàn)輪播
實(shí)例中的方法:
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" 事件,使輪播鼠標(biāo)移入時停止,移出時再次開始。
輪播圖現(xiàn)在位置指示,綁定類名 active 改變顏色,綁定 change() 方法,鼠標(biāo)移到指示點(diǎn)時跳轉(zhuǎn)輪播圖
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; } }
滑動動畫設(shè)置,知識點(diǎn)詳見 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 實(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: { 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 過渡實(shí)現(xiàn)的輪播圖,喜歡的話請關(guān)注,點(diǎn)贊,收藏~謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88198.html
摘要:輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口,模擬網(wǎng)易云音樂移動端。目前主要實(shí)現(xiàn)了無縫輪播,自動播放,端左右按鈕點(diǎn)擊切換,移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言:寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口,模擬網(wǎng)易云音樂移動端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局,所以沒有使用UI組件。在輪播圖部分,...
摘要:輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口,模擬網(wǎng)易云音樂移動端。目前主要實(shí)現(xiàn)了無縫輪播,自動播放,端左右按鈕點(diǎn)擊切換,移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言:寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口,模擬網(wǎng)易云音樂移動端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局,所以沒有使用UI組件。在輪播圖部分,...
摘要:輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口,模擬網(wǎng)易云音樂移動端。目前主要實(shí)現(xiàn)了無縫輪播,自動播放,端左右按鈕點(diǎn)擊切換,移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言:寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口,模擬網(wǎng)易云音樂移動端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局,所以沒有使用UI組件。在輪播圖部分,...
摘要:實(shí)現(xiàn)原理無縫滾動預(yù)處理為了無縫滾動,在傳進(jìn)來的數(shù)組首部增加末尾元素,在尾部追加首元素看圖數(shù)據(jù)綁定視圖為當(dāng)前顯示的輪播圖索引,然后只需要對進(jìn)行操作,監(jiān)聽的變化,一旦到達(dá)了邊界就重置,顯示出對應(yīng)的圖片。 該文章請對應(yīng)源碼閱讀,github源碼地址,DEMO使用地址,線上DEOM展示。 做一個vue基礎(chǔ)組件系列,使用vue以最簡潔的方式實(shí)現(xiàn)常用組件,可用于快速二次定制化開發(fā)。 (??????...
摘要:實(shí)現(xiàn)原理無縫滾動預(yù)處理為了無縫滾動,在傳進(jìn)來的數(shù)組首部增加末尾元素,在尾部追加首元素看圖數(shù)據(jù)綁定視圖為當(dāng)前顯示的輪播圖索引,然后只需要對進(jìn)行操作,監(jiān)聽的變化,一旦到達(dá)了邊界就重置,顯示出對應(yīng)的圖片。 該文章請對應(yīng)源碼閱讀,github源碼地址,DEMO使用地址,線上DEOM展示。 做一個vue基礎(chǔ)組件系列,使用vue以最簡潔的方式實(shí)現(xiàn)常用組件,可用于快速二次定制化開發(fā)。 (??????...
閱讀 1776·2021-11-11 11:02
閱讀 1679·2021-09-22 15:55
閱讀 2482·2021-09-22 15:18
閱讀 3487·2019-08-29 11:26
閱讀 3742·2019-08-26 13:43
閱讀 2646·2019-08-26 13:32
閱讀 896·2019-08-26 10:55
閱讀 964·2019-08-26 10:27