您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何在Vue2中使用slide輪播圖組件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
<v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>
話不多說(shuō)直接上源碼
輪播圖應(yīng)用頁(yè)面 \components\public\home.vue
<template> <div id="home"> <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel> </div> </template> <script> import carousel from "./public/carousel"; export default { name: 'home', data() { return { slideData:[ { title:'這是一個(gè)Vue輪播圖組件', src:require('../assets/pic1.jpg'), url:'/show/499' }, { title:'這是一個(gè)Vue輪播圖組件', src:require('../assets/pic2.jpg'), url:'/show/499' }, { title:'這是一個(gè)Vue輪播圖組件', src:require('../assets/pic3.jpg'), url:'/show/499' }, { title:'這是一個(gè)Vue輪播圖組件', src:require('../assets/pic4.jpg'), url:'/show/499' }, { title:'這是一個(gè)Vue輪播圖組件', src:require('../assets/pic5.jpg'), url:'/show/499' }, ] } }, components:{ 'v-carousel': carousel, }, methods: { }, mounted() { } } </script> <style scoped> </style>
輪播圖組件頁(yè)面 src\components\public\carousel.vue
<template> <div id="carousel"> <div class="carousel" ref="carousel" v-bind:> <transition-group tag="ul" class="slide clearfix" :name="transitionName" > <li v-for="(item,index) in slideData" :key="index" v-show="index==beginValue" v-bind: > <router-link :to="item.url"> <img :src="item.src"> <div class="title">{{item.title}}</div> </router-link> </li> </transition-group> <div class="up" @click="up" v-show="arrow"></div> <div class="next" @click="next" v-show="arrow"></div> <div class="slideDot" v-show="dot"> <span v-for="(item,index) in slideData" :class="{active:index==beginValue}" @click="change(index)" :key="index"></span> </div> </div> </div> </template> <script> export default { name: "carousel", data(){ return{ setInterval:'', beginValue:0, transitionName:'slide' } }, beforeDestroy() { // 組件銷毀前,清除監(jiān)聽(tīng)器 clearInterval(this.setInterval); }, methods:{ change(key){ if(key>(this.slideData.length-1)){ key=0; } if(key<0){ key=this.slideData.length-1; } this.beginValue=key; }, autoPlay(){ //console.log(this.$refs.carousel.getBoundingClientRect().width); this.transitionName='slide'; this.beginValue++ if(this.beginValue>=this.slideData.length){ this.beginValue=0; return; } }, play(){ this.setInterval=setInterval(this.autoPlay,this.interval) }, mouseOver(){ //鼠標(biāo)進(jìn)入 //console.log('over') clearInterval(this.setInterval) }, mouseOut(){ //鼠標(biāo)離開(kāi) //console.log('out') this.play() }, up(){ //上一頁(yè) --this.beginValue; this.transitionName='slideBack'; this.change(this.beginValue); }, next(){ //下一頁(yè) ++this.beginValue; this.transitionName='slide'; this.change(this.beginValue); } }, mounted(){ var box = this.$refs.carousel; //監(jiān)聽(tīng)對(duì)象 box.addEventListener('mouseover',()=>{ this.mouseOver(); }) box.addEventListener('mouseout',()=>{ this.mouseOut(); }) this.beginValue=this.begin; this.play(); }, props:{ height:{ type: Number, default: 600 }, dot:{ type: Boolean, default: true }, arrow:{ type: Boolean, default: true }, interval:{ type: Number, default: 5000 }, begin:{ type: Number, default: 0 }, slideData:{ type: Array, default: function () { return []; } } } } </script>
<style scoped> .slide{position: relative;margin: 0;padding: 0; overflow: hidden;width: 100%; height:450px;} .slide li{list-style: none;position: absolute;width: 100%; height:450px;} .slide li img{width: 100%; height:450px;cursor:pointer} .slide li .title{position: absolute; left:0; bottom: 0; padding: 10px 20px; width: 100%; background: rgba(0,0,0,.35);color: #fff;font-size: larger; text-align: center} .slideDot{position: absolute;z-index: 999; bottom: 60px;right:15px; } .slideDot span{display: inline-block; width: 30px; height: 7px; background:rgba(255,255,255,.65); margin-left: 5px;} .slideDot span.active{background:rgba(255,255,255,1);} .up,.next{position: absolute; left:0; top: 50%; margin-top: -32px; cursor: pointer; width:64px;height: 64px; background-repeat: no-repeat; background-position: 50% 50%; } .up{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABSklEQVRoQ9Xa220CMRCF4XMqIB0kdJASSCfpIDWlAzqAElIC6SBUMNFIywsCtB7PjX336v/k3YexTBQ+IvIC4AvAN8mTJYWWRR5rROQdwAGAIk4kt5b3lgCu4rX7l+TbUwBuxJ8B7Ej+tAd4xys47ROKiE8DRMWnACLjwwHR8aGAjPgwQFZ8CCAz3h3QHe8KqIh4A1TFuwAq46cB1fFTgA7xZkCXeBOgU/wwoFv8EKBj/GpA1/gRgJ4e7JaZdWqGtcy9j9asGilFRM9sXpcX/QH4sA7hVQA9wzkC2HRDrNoBjV7+g3aI1YCuiCFAR8QwoBvCBOiEMAO6IKYAHRDTgGqEC6AS4QaoQrgCKhDugGxECCATEQbIQoQCMhDhgGhECiASkQaIQqQCIhDpgDuI57orcQNxJqmXPoafkh34VIqIXvD4BLC3HtP8A6pfGkB3vbyXAAAAAElFTkSuQmCC");} .next{left: auto;right:0;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOElEQVRoQ9Xa0W0CQQyEYU9JqShQAXSSEgIdUAIlQAd04milezgdOiHZ4/GGN5C8/N/u060Olvy4+8nMngDuyaVC4whNLUPufjazn+XrEcAls15klgkY/y9HpACj2N3Hrn+vdk+KSAO6ERRAJ4IG6EJQAR0IOkCNKAEoEWUAFaIUoECUA6oREkAlQgaoQkgBFQg5gI1oATARbQAWohXAQLQDsogpABnENIAoYirADuILwGPvxmJGwK+ZHVbB/wfg7tv4K4A15u0gpjmBSPzQTAGIxk8ByMS3A7LxrQBGfBuAFd8CYMbLAex4KaAiXgaoipcAKuPLAdXxpQBFfBlAFV8CUMbTAep4KqAjngboiqcAOuPTgM27EmO9j8+we7cL0d9Tj5QbgDw+fQLLPc54Y+UF4BbdxczcH9Le8DFn39OvAAAAAElFTkSuQmCC");} .up:hover{background-color: rgba(0,0,0,.3)} .next:hover{background-color: rgba(0,0,0,.3)} /*進(jìn)入過(guò)渡生效時(shí)的狀態(tài)*/ .slide-enter-active{ transform:translateX(0); transition: all 1s ease; } /*進(jìn)入開(kāi)始狀態(tài)*/ .slide-enter{ transform:translateX(-100%); } /*離開(kāi)過(guò)渡生效時(shí)的狀態(tài)*/ .slide-leave-active{ transform:translateX(100%); transition: all 1s ease; } /*離開(kāi)過(guò)渡的開(kāi)始狀態(tài)*/ .slide-leave{ transform:translateX(0); } /*進(jìn)入過(guò)渡生效時(shí)的狀態(tài)*/ .slideBack-enter-active{ transform:translateX(0); transition: all 1s ease; } /*進(jìn)入開(kāi)始狀態(tài)*/ .slideBack-enter{ transform:translateX(100%); } /*離開(kāi)過(guò)渡生效時(shí)的狀態(tài)*/ .slideBack-leave-active{ transform:translateX(-100%); transition: all 1s ease; } /*離開(kāi)過(guò)渡的開(kāi)始狀態(tài)*/ .slideBack-leave{ transform:translateX(0); } </style>
看完上述內(nèi)容,你們對(duì)如何在Vue2中使用slide輪播圖組件有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。