嗨，說起探探想必各位程序汪都不陌生(畢竟妹子很多)，能在上面絲滑的翻牌子，探探的的堆疊滑動(dòng)組件起到了關(guān)鍵的作用，下面就來看看如何用vue寫一個(gè)探探的堆疊組件 ?

簡單使用下探探會(huì)發(fā)現(xiàn)，堆疊滑動(dòng)的功能很簡單，用一張圖概括就是:

簡單歸納下里面包含的基本功能點(diǎn):

圖片的堆疊

圖片第一張的滑動(dòng)

條件成功后的滑出，條件失敗后的回彈

滑出后下一張圖片堆疊到頂部

體驗(yàn)優(yōu)化

根據(jù)觸摸點(diǎn)的不同，滑動(dòng)時(shí)首圖有不同角度偏移

偏移面積判定是否成功滑出

有了歸納好的功能點(diǎn)，我們實(shí)現(xiàn)組件的思路會(huì)更清晰

堆疊圖片效果在網(wǎng)上有大量的實(shí)例，實(shí)現(xiàn)的方法大同小異，主要通過在父層設(shè)定perspective及perspective-origin，來實(shí)現(xiàn)子層的透視，子層設(shè)定好translate3d Z軸數(shù)值即可模擬出堆疊效果，具體代碼如下

// 圖片堆疊dom
 
 

 

 

 

 

 

上面只是一組靜態(tài)代碼，我們希望得到的是vue組件，所以需要先建立一個(gè)組件模板stack.vue，在模板中我們可以使用v-for，遍歷出stack節(jié)點(diǎn)，使用:style 來修改各個(gè)item的style，代碼如下

:style可以綁定對(duì)象的同時(shí)，也可以綁定數(shù)組和函數(shù)，這在遍歷的時(shí)候很有用

最基本的dom結(jié)構(gòu)已經(jīng)構(gòu)建完畢，下一步是讓首張圖片“動(dòng)”起來

圖片滑動(dòng)效果，在很多場景中都有出現(xiàn)，其原理無非是監(jiān)聽touchs事件，得到位移，再通過translate3D改變目標(biāo)位移，因此我們要實(shí)現(xiàn)的步驟如下

對(duì)stack進(jìn)行touchs事件的綁定

監(jiān)聽并儲(chǔ)存手勢(shì)位置變化的數(shù)值

改變首圖css屬性中translate3D的x，y值

在vue框架中，不建議直接操作節(jié)點(diǎn)，而是通過指令v-on對(duì)元素進(jìn)行綁定，因此我們將綁定都寫在v-for遍歷里，通過index進(jìn)行判斷其是否是首圖，再使用:style修改首頁的樣式，具體代碼如下:

條件的觸發(fā)判斷是在touchend/mouseup后進(jìn)行，在這里我們先用簡單的條件進(jìn)行判定，同時(shí)給予首圖彈出及回彈的效果，代碼如下

重新堆疊是組件最后一個(gè)功能，同時(shí)也是最重要和復(fù)雜的功能。在我們的代碼里，stack-item的排序依賴綁定:style的transformIndex和transform函數(shù)，函數(shù)里判定的條件是currentPage，那是不是改變currentPage，讓其+1，即可完成重新堆疊呢？

答案沒有那么簡單，因?yàn)槲覀兓鍪莿?dòng)畫效果，會(huì)進(jìn)行300ms的時(shí)間，而currentPage變化引起的重排，會(huì)立即變化，打斷動(dòng)畫的進(jìn)行。因此我們需要先修改transform函數(shù)的排序條件，后改變currentPage。
#### 具體實(shí)現(xiàn)

修改transform函數(shù)排序條件

讓currentPage+1

添加onTransitionEnd事件，在滑出結(jié)束后，重新放置stack列表中

代碼如下：

ok~ 完成了上面的四步，堆疊組件的基本功能就已經(jīng)實(shí)現(xiàn)，快來看看效果吧

堆疊滑動(dòng)效果已經(jīng)出來了，但是探探在體驗(yàn)上，還增加了觸碰角度偏移，以及判定滑出面積比例

角度偏移的原理，是在用戶每次進(jìn)行touch時(shí)，記錄用戶觸碰位置，計(jì)算出最大的偏移角度，在滑動(dòng)出現(xiàn)位移時(shí)，線性增加角度以至最大的偏移角度。
使用在stack中具體要做的是：

touchmove中計(jì)算出所需角度和方向

touchend及onTransitionEnd中將角度至零

判定滑出面積比例，主要通過偏移量計(jì)算出偏移面積，從而得到面積比例，完成判斷

完整的代碼和demo可以在github上查看源碼，這里就不貼出來了

謝謝大家看完這篇文章，喜歡可以在github上給個(gè)?? ，最后祝大家在探探上都能找到前女友?

分享我寫的另一個(gè)vue-slider組件vue-consise-slider
最近在找新工作，坐標(biāo)廣州，三年前端經(jīng)驗(yàn)，熟悉vue，有工作介紹的朋友可以郵箱聯(lián)系我warpcgd@qq.com