Vue中實(shí)現(xiàn)輪播圖效果的代碼怎么寫
本文小編為大家詳細(xì)介紹“Vue中實(shí)現(xiàn)輪播圖效果的代碼怎么寫”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue中實(shí)現(xiàn)輪播圖效果的代碼怎么寫”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
創(chuàng)新互聯(lián)建站專注于昔陽企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。昔陽網(wǎng)站建設(shè)公司,為昔陽等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
Vue 過渡
Vue 的過渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。
過渡的實(shí)現(xiàn)要在目標(biāo)元素上使用 transition 屬性，具體實(shí)現(xiàn)參考Vue2 過渡
下面例子中我們用到列表過渡，可以先學(xué)習(xí)一下官方的例子
要同時渲染整個列表，比如使用 v-for，我們需要用到 組件
Vue 輪播圖
我們先看這樣一個列表
這個列表要從實(shí)例(見文章末尾)中獲取了三張圖片，要使其中的圖片產(chǎn)生輪播，我們需要用 組件替換其中的 ul 標(biāo)簽，從而實(shí)現(xiàn)過渡組件的功能，完整的組件 DOM 內(nèi)容如下，下面分段解釋一下
// 輪播圖列表
// 輪播圖位置指示
對應(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)識，在 組件中，key 是必須的，這樣一個輪播圖的 DOM 結(jié)構(gòu)就完成了
接下來我們看看輪播函數(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í)例中的方法：
//在下個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 中為每個輪播 li 元素綁定事件 @mouseenter="stop" @mouseleave="go" 事件,使輪播鼠標(biāo)移入時停止，移出時再次開始。
輪播圖現(xiàn)在位置指示，綁定類名 active 改變顏色，綁定 change() 方法，鼠標(biāo)移到指示點(diǎn)時跳轉(zhuǎn)輪播圖
讀到這里，這篇“Vue中實(shí)現(xiàn)輪播圖效果的代碼怎么寫”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
