Vue 過(guò)渡實(shí)現(xiàn)輪播圖

zr_hebo 發(fā)布于2019-08-21 15:29 / 2589人閱讀

摘要：過(guò)渡實(shí)現(xiàn)輪播圖過(guò)渡的過(guò)渡系統(tǒng)是內(nèi)置的，在元素從中插入或移除時(shí)自動(dòng)應(yīng)用過(guò)渡效果。

Vue 過(guò)渡實(shí)現(xiàn)輪播圖 Vue 過(guò)渡

Vue 的過(guò)渡系統(tǒng)是內(nèi)置的，在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過(guò)渡效果。

過(guò)渡的實(shí)現(xiàn)要在目標(biāo)元素上使用 transition 屬性，具體實(shí)現(xiàn)參考Vue2 過(guò)渡

下面例子中我們用到列表過(guò)渡，可以先學(xué)習(xí)一下官方的例子

要同時(shí)渲染整個(gè)列表，比如使用 v-for，我們需要用到組件

Vue 輪播圖

demo
我們先看這樣一個(gè)列表

這個(gè)列表要從實(shí)例(見(jiàn)文章末尾)中獲取了三張圖片，要使其中的圖片產(chǎn)生輪播，我們需要用組件替換其中的 ul 標(biāo)簽，從而實(shí)現(xiàn)過(guò)渡組件的功能，完整的組件 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 元素

上面通過(guò) 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 處理，通過(guò) index 值來(lái)改變當(dāng)前顯示的 li ，本例 v-show 綁定條件 index===currentIndex，用定時(shí)器改變 currentIndex 實(shí)現(xiàn)輪播

實(shí)例中的方法：

created() {
    //在DOM加載完成后，下個(gè)tick中開(kāi)始輪播
    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í)再次開(kāi)始。

輪播圖現(xiàn)在位置指示，綁定類名 active 改變顏色，綁定 change() 方法，鼠標(biāo)移到指示點(diǎn)時(shí)跳轉(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;
  }
}

滑動(dòng)動(dòng)畫(huà)設(shè)置，知識(shí)點(diǎn)詳見(jiàn) Vue 教程中的過(guò)渡 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 過(guò)渡實(shí)現(xiàn)的輪播圖，喜歡的話請(qǐng)關(guān)注，點(diǎn)贊，收藏~謝謝

GPU云服務(wù)器云服務(wù)器 react實(shí)現(xiàn)輪播圖輪播圖寫(xiě)輪播圖將輪播圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88198.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zr_hebo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

OneTechCloud雙11鉅惠：全場(chǎng)季付8折，新上日本cn2機(jī)型，充值余額多送10%

閱讀 1869·2021-11-11 11:02
海星云主機(jī)怎么用-云主機(jī)怎么使用？

閱讀 1786·2021-09-22 15:55
云主機(jī)如何實(shí)現(xiàn)-云主機(jī)是什么？

閱讀 2600·2021-09-22 15:18
七種css方式讓一個(gè)容器水平垂直居中

閱讀 3552·2019-08-29 11:26
js 時(shí)間戳/日期格式互轉(zhuǎn)

閱讀 3820·2019-08-26 13:43
閱讀 2997·2019-08-26 13:32
nodejs使用node-xlsx生成excel

閱讀 984·2019-08-26 10:55
cookie使用小結(jié)

閱讀 1027·2019-08-26 10:27

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue 過(guò)渡實(shí)現(xiàn)輪播圖

相關(guān)文章

**原生js寫(xiě)一個(gè)無(wú)縫輪播圖插件(支持vue)**

**原生js寫(xiě)一個(gè)無(wú)縫輪播圖插件(支持vue)**

**原生js寫(xiě)一個(gè)無(wú)縫輪播圖插件(支持vue)**

[vue組件]無(wú)縫輪播圖

[vue組件]無(wú)縫輪播圖

發(fā)表評(píng)論

0條評(píng)論

zr_hebo

男|高級(jí)講師

TA的文章

OneTechCloud雙11鉅惠：全場(chǎng)季付8折，新上日本cn2機(jī)型，充值余額多送10%

海星云主機(jī)怎么用-云主機(jī)怎么使用？

云主機(jī)如何實(shí)現(xiàn)-云主機(jī)是什么？

七種css方式讓一個(gè)容器水平垂直居中

js 時(shí)間戳/日期格式互轉(zhuǎn)

nodejs使用node-xlsx生成excel

cookie使用小結(jié)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue 過(guò)渡實(shí)現(xiàn)輪播圖

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！