本文小編為大家詳細(xì)介紹“怎么使用vue制作探探滑動(dòng)堆疊組件”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么使用vue制作探探滑動(dòng)堆疊組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

尼瑪網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,尼瑪網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為尼瑪上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的尼瑪做網(wǎng)站的公司定做！

效果圖如下所示：

前言

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

一. 功能分析

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

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

• 圖片的堆疊

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

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

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

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

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

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

二. 具體實(shí)現(xiàn)

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

1. 堆疊效果

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

// 圖片堆疊dom
 
 

 
 
 
 
 

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

關(guān)鍵點(diǎn)

:style 可以綁定對(duì)象的同時(shí)，也可以綁定數(shù)組和函數(shù)，這在遍歷的時(shí)候很有用
最基本的dom結(jié)構(gòu)已經(jīng)構(gòu)建完畢，下一步是讓首張圖片“動(dòng)”起來(lái)

2. 圖片滑動(dòng)

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

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

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

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

#### 具體實(shí)現(xiàn)

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

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

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

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

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

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

#### 具體實(shí)現(xiàn)

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

• 讓currentPage+1

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

代碼如下：

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

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

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

使用在stack中具體要做的是：

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

• touchend及onTransitionEnd中將角度至零

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

讀到這里，這篇“怎么使用vue制作探探滑動(dòng)堆疊組件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。