Vue中如何實(shí)現(xiàn)輪播圖效果
這篇文章將為大家詳細(xì)講解有關(guān)Vue中如何實(shí)現(xiàn)輪播圖效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了喀什免費(fèi)建站歡迎大家使用！
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，我們需要用到 組件
Vue 輪播圖
我們先看這樣一個(gè)列表
這個(gè)列表要從實(shí)例(見文章末尾)中獲取了三張圖片，要使其中的圖片產(chǎn)生輪播，我們需要用 組件替換其中的 ul 標(biāo)簽，從而實(shí)現(xiàn)過渡組件的功能，完整的組件 DOM 內(nèi)容如下，下面分段解釋一下
// 輪播圖列表
// 輪播圖位置指示
對(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í)，在 組件中，key 是必須的，這樣一個(gè)輪播圖的 DOM 結(jié)構(gòu)就完成了
接下來(lái)我們看看輪播函數(shù)的實(shí)現(xiàn)，再來(lái)看組件中的 li 元素
上面通過 v-for 渲染了 li 列表，并在其中插入了包含可點(diǎn)擊跳轉(zhuǎn)的圖片，接下來(lái)看看如何實(shí)現(xiàn)輪播，輪播圖的樣式直接在后面給出大家 sass 代碼，父元素 ul 設(shè)置 position: relative;overflow: hidden 后，li 大小設(shè)為和父元素相同，absolute 定位固定在父元素中，要讓 li 按照順序顯示，需要用到 v-show 或 v-if 處理，通過 index 值來(lái)改變當(dāng)前顯示的 li ，本例 v-show 綁定條件 index===currentIndex，用定時(shí)器改變 currentIndex 實(shí)現(xiàn)輪播
實(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)輪播圖
關(guān)于“Vue中如何實(shí)現(xiàn)輪播圖效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
