預(yù)覽地址

圖片的輪播

假設(shè)需要輪播三張圖片(1,2,3)，以前的思路就如圖所示，添加兩個(gè)節(jié)點(diǎn)。通過(guò)索引(index)的切換實(shí)現(xiàn)組件的無(wú)縫輪播。

這種想法的確可行，而且實(shí)現(xiàn)出來(lái)效果還不錯(cuò)。 缺點(diǎn)在于

• 大量的dom操作。
• 代碼邏輯相對(duì)挺復(fù)雜，量也更多。
• 重構(gòu)或添加新功能會(huì)更麻煩

現(xiàn)在的思路

創(chuàng)建兩個(gè)組件分別為 carousel和 carousel-item

結(jié)構(gòu)如下

<x-carousel :selected.sync="selected"><x-carousel-item name="1"><div class="box"> 1</div></x-carousel-item><x-carousel-item name="2"><div class="box">2</div></x-carousel-item><x-carousel-item name="3"><div class="box">3</div></x-carousel-item> </x-carousel> 復(fù)制代碼

selected即為顯示的內(nèi)容的name，用sync做一個(gè)"雙向綁定"。這樣子父組件就可以通過(guò) updated鉤子和$children來(lái)實(shí)時(shí)通知子組件，從而控制內(nèi)容的展示。

updated(){this.updateChildrens(this.selected)}methods:{updateChildrens(){//被選中的那個(gè)可以顯示了，其他的關(guān)閉}} 復(fù)制代碼

也就是說(shuō) carousel負(fù)責(zé)數(shù)據(jù)通信,而carousel-item只需完成動(dòng)畫過(guò)渡效果就行了，這樣邏輯就非常清晰了。

這里當(dāng)然就存在動(dòng)畫正向與反向的問(wèn)題，需要兩種方向不同的切入切出的動(dòng)畫。 carousel需要做一次判斷然后在updateChildrens的時(shí)候就告訴子組件方向。

進(jìn)入方向的判斷

• 需要一個(gè)變量記錄上一次的selected數(shù)值，假設(shè)就為 oldSelected 和newSelected
• 自動(dòng)輪播是默認(rèn)正向的(往后播放)，到最后一個(gè)的時(shí)候回到第一個(gè)應(yīng)該也是正向的
• 圓點(diǎn)(圖片索引圖標(biāo))選取切換，只需判斷兩次變量的大小就行
• 方向鍵切換(箭頭圖標(biāo))，和自動(dòng)輪播同理，方向應(yīng)時(shí)刻和箭頭方向一致

解決跳過(guò)中間圖片的問(wèn)題

不管輪播圖數(shù)量多少，這里始終只在兩張圖里面切換。這樣就涉及到一個(gè)問(wèn)題就是會(huì) 跳過(guò)中間的圖片

首先carousel-item有一個(gè)默認(rèn)的圖片過(guò)渡時(shí)間，這里可以通過(guò)計(jì)算oldSelected 和newSelected之間的差值來(lái)確定跳過(guò)圖片的數(shù)量。當(dāng)然也有動(dòng)畫方向的問(wèn)題。

clickSelected(newSelected){clearInterval(this.timer2)if(oldSelected===newSelected)returnlastSelected = oldSelected// .............this.‘控制時(shí)長(zhǎng)的函數(shù)’(lastSelected,newSelected)},'控制時(shí)長(zhǎng)的函數(shù)'(lastSelected,newSelected){//........let newIndex = newSelected let animationDuration = '計(jì)時(shí)器的間隔時(shí)長(zhǎng)'theIndex = ‘下一個(gè)展示的圖片索引’//.......this.duration = duration this.'carousel組件'.forEach(vm=>vm.duration=duration)this.$emit('update:selected',names[theIndex])//通知一下父組件將要展示的下一個(gè)圖片的索引if(theIndex===newIndex)returnthis.timer2 = setInterval(()=>{if(theIndex===newIndex){this.clearAndSet()}this.$emit('update:selected',names[theIndex])oldIndex>newIndex?theIndex--:theIndex++},duration*animationDuration)} 復(fù)制代碼

基本就能完成跳過(guò)中間圖片的這樣子的問(wèn)題了，后面的click改為 hover觸發(fā)功能就很簡(jiǎn)單了。

Card卡片化

需要默認(rèn)三個(gè)同時(shí)出現(xiàn)的圖片，這意味著需要一個(gè)數(shù)組。 但是依然不需要改變selected的數(shù)據(jù)類型(還是字符串)。這種情況用傳遞數(shù)組只會(huì)添加許多不必要的麻煩和降低性能，像是需要做深拷貝，遍歷判斷這類的。 因?yàn)檫@個(gè)應(yīng)該出現(xiàn)的圖片的數(shù)組里面的index都是連號(hào)的。這個(gè)判斷只需讓子組件來(lái)做就行了。

現(xiàn)在在carousel-item通過(guò)計(jì)算得到一個(gè)數(shù)組

this.cardSelected = [selected-1,selected,selected+1] if(`最后一張圖`){//..... }else if(`第一張圖`){} 復(fù)制代碼

現(xiàn)在實(shí)時(shí)顯示的三張圖片的數(shù)組已經(jīng)有了，我只需要分配好他們的位置（左邊，中間，右邊

'我是決定位置的函數(shù)'(){let [index,position] = [this.cardSelected.indexOf(Number(this.name)),['left','main','right']]return `position-${position[index]}` } 復(fù)制代碼

簡(jiǎn)單的兩行就搞定了。

然后綁定一下

:class="{......,[我是決定位置的函數(shù)]:card}"> 復(fù)制代碼

剩下的定位還是動(dòng)畫什么的，都可以交給css去完成了。

&.position-left{width: 50%;position: absolute;top: 0;left: -10px;transform:scale(0.82);}&.position-main{width: 50%;transform: translateX(50%);position: relative;z-index: 3;}&.position-right{transform: translateX(100%) scale(0.82);width: 50%;position: absolute;top: 0;left: 10px;} 復(fù)制代碼

最后就是點(diǎn)擊兩側(cè)圖片會(huì)切換

調(diào)用父組件的方法就ok了

'調(diào)用父組件的方法'(){let [direction,index] = [this.'我是決定位置的函數(shù)'.slice(9,16),this.$parent.selectedIndex]if(direction==='main')returnlet move = {left:'back', right:'go'}this.$parent.'我是父組件的方法'(index,move[direction])} 復(fù)制代碼

尚未完善的細(xì)節(jié)

其實(shí)我認(rèn)為動(dòng)畫還是有一點(diǎn)點(diǎn)瑕疵的，后面會(huì)在css上修改一下，順便簡(jiǎn)單調(diào)整樣式和更換動(dòng)態(tài)svg。最后，有待加強(qiáng)的地方希望大佬們指出來(lái)交流，要是覺(jué)得還行的話，給我的項(xiàng)目點(diǎn)個(gè)star就是最好的了。

轉(zhuǎn)載于:https://juejin.im/post/5c9352f75188252d6d2face4

總結(jié)

以上是生活随笔為你收集整理的vue组件之轮播图的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。