Vue的輪播圖組件實(shí)現(xiàn)方法
今天在上慕課老師fishenal的vue實(shí)戰(zhàn)課程的時候，有一個輪播圖組件實(shí)現(xiàn)，在跟著做的時候，自己也踩了一些坑。此外，在原課程案例的基礎(chǔ)上，我加入了不同方向的滑動功能。
本文章采用Vue結(jié)合Css3來實(shí)現(xiàn)輪播圖。
首先要了解的是Vue的動畫原理。在vue中，如果我們要給元素設(shè)置動畫效果，則需要使用一個<transition name="targetClassName"></transition>將相應(yīng)的元素包裹住，如下：
<transition name="imgShouldMove"> <img v-if="shouldShow" src="/1.jpg"> </transition>
之后，便可以在.imgShoudMove中設(shè)置動畫屬性了，如下:
.imgShouldMove-enter{
transition: all 0.5s;
}
.imgShouldMove-enter-active{
transform:translateX(900px);
}
注意在HTML中，這里<img>有一個v-if="shoudShow"屬性。shouldShow這個屬性是在data(){}中設(shè)置的，當(dāng)shouldShow從false-->true時（即img從無到突然出現(xiàn)時），Vue動畫原理將動畫分為了 shouldShouldMove-enter 和 imgShouldMove-enter-active 兩個階段。
我本人對其的理解為，其中 shouldShouldMove-enter 表示動畫開始的初始狀態(tài)， imgShouldMove-enter-active 這表示動畫的終止?fàn)顟B(tài)。而動畫的觸發(fā)則是通過if-show引起的。
如下圖
了解了這些之后，我就可以開始著手實(shí)現(xiàn)輪播圖組件了。
首先是HTML代碼：
<template>
<div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
<div class="imgBox">
<a :href="pics[currentIndex].href" rel="external nofollow" >
<transition v-bind:name="'carousel-trans-' + direction + '-old'">
<!-- isShow: false -> true
取反后: true -> false(從顯示到消失) -->
<img v-if="!isShow" :src="pics[currentIndex].src">
</transition>
<transition v-bind:name="'carousel-trans-' + direction ">
<!-- isShow: false -> true -->
<!-- 從消失到顯示 -->
<img v-if="isShow" :src="pics[currentIndex].src">
</transition>
</a>
</div>
<h2>{{pics[currentIndex].title}}</h2>
<ul class="pagination">
<li v-for="(item, index) in pics" @click="goto(index)" :class="{active:index === currentIndex}">{{index + 1}}</li>
</ul>
<div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont"></i></div>
<div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont"></i></div>
</div>
</template>
Script代碼：
<script>
export default {
props:{
pics:{
type:Array,
default:[]
},
timeDelta:{
type:Number,
default:2000
}
},
data () {
return {
currentIndex:0,
isShow:true,
direction:'toleft'
}
},
computed:{
prevIndex(){
this.direction = 'toleft'
if (this.currentIndex <= 0) {
return this.pics.length - 1
}
return this.currentIndex - 1
},
nextIndex(){
this.direction = 'toright'
if (this.currentIndex >= this.pics.length - 1) {
return 0
}
return this.currentIndex + 1
}
},
methods:{
goto(index){
this.isShow = false
setTimeout(()=>{
this.isShow = true
this.currentIndex = index
},10)
},
runInterval(){
this.direction = 'toright'
this.timer = setInterval(()=>{
this.goto(this.nextIndex)
},this.timeDelta)
},
clearInv(){
clearInterval(this.timer)
}
},
mounted(){
this.runInterval()
}
}
</script>
與動畫相關(guān)的css代碼如下
.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{
transition:all 0.5s;
}
.carousel-trans-toright-enter{
transform:translateX(940px); //新圖片從右側(cè)940px進(jìn)入
}
.carousel-trans-toright-old-leave-active{
transform:translateX(-940px); //老圖片向左側(cè)940px出去
}
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{
transition:all 0.5s;
}
.carousel-trans-toleft-enter{
transform:translateX(-940px); //新圖片從右側(cè)940px進(jìn)入
}
.carousel-trans-toleft-old-leave-active{
transform:translateX(940px); //老圖片向左側(cè)940px出去
}
---------------以下為解釋說明-------------
注意：對于<img>需要放在<box>里面，<box>需要設(shè)置為position:relative; 而<img>必須設(shè)置為position:absolute; 這步非常非常重要，否則每次莫名其妙的總是只有一張圖片顯示。
在每次切換的時候，都要觸發(fā)goto()方法，將this.isShow先置false，10毫秒后，this.isShow置true。這時，html中的<transition>被觸發(fā)，它與css相結(jié)合觸發(fā)動畫效果，持續(xù)時間為css屬性中的transition所定的0.5s。
在向前、向后切換的時候，使用到了計(jì)算屬性，在div.prevBtn以及div.nextBtn上，我們作了點(diǎn)擊事件綁定，觸發(fā)方法goto(),而傳入的正是計(jì)算屬性prevIndex， @click="goto(prevIndex)"
計(jì)算屬性的設(shè)定方法如下：
computed:{
prevIndex(){
//經(jīng)過一番計(jì)算過程得出result
return result //這個值即<template>中的prevIndex
}
},
每隔2秒自動滑動時，我們向left滑動，在data中，設(shè)定了變量 direction ，它的值要么為字符串'toleft'，要么為'toright'。
我們在計(jì)算屬性中對 this.direction 進(jìn)行了設(shè)置，并在<template>中對相應(yīng)的name進(jìn)行了字符串拼接，如下
<transition v-bind:name="'carousel-trans-' + direction ">
在vue中，除了class和style可以傳入對象、數(shù)組，其他的屬性綁定必須進(jìn)行字符串拼接。
以上這篇Vue的輪播圖組件實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗(yàn),本文主要介紹了Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
ant-design-vue中的select選擇器,對輸入值的進(jìn)行篩選操作
這篇文章主要介紹了ant-design-vue中的select選擇器,對輸入值的進(jìn)行篩選操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue3.0在子組件中觸發(fā)的父組件函數(shù)方式
這篇文章主要介紹了vue3.0在子組件中觸發(fā)的父組件函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)羊了個羊的算法,初始化的隨機(jī)位置算法，通過實(shí)例代碼介紹了計(jì)算偏移量的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09