如何用vue製作乙個探探滑動元件

嗨，說起探探想必各位程式汪都不陌生(畢竟妹子很多)，能在上面絲滑的翻牌子，探探的的堆疊滑動元件起到了關鍵的作用，下面就來看看如何用vue寫乙個探探的堆疊元件 ?

簡單使用下探探會發現，堆疊滑動的功能很簡單，用一張圖概括就是:

簡單歸納下裡面包含的基本功能點:

體驗優化

有了歸納好的功能點，我們實現元件的思路會更清晰

堆疊效果在網上有大量的例項，實現的方法大同小異，主要通過在父層設定perspective及perspective-origin，來實現子層的透視，子層設定好translate3d z軸數值即可模擬出堆疊效果，具體**如下

// 堆疊dom

上面只是一組靜態**，我們希望得到的是vue元件，所以需要先建立乙個元件模板stack.vue，在模板中我們可以使用v-for，遍歷出stack節點，使用:style 來修改各個item的style，**如下

關鍵點滑動效果，在很多場景中都有出現，其原理無非是監聽touchs事件，得到位移，再通過translate3d改變目標位移，因此我們要實現的步驟如下

具體實現

在vue框架中，不建議直接操作節點，而是通過指令v-on對元素進行繫結，因此我們將繫結都寫在v-for遍歷裡，通過index進行判斷其是否是首圖，再使用:style修改首頁的樣式，具體**如下:

條件的觸發判斷是在touchend/mouseup後進行，在這裡我們先用簡單的條件進行判定，同時給予首圖彈出及回彈的效果，**如下

重新堆疊是元件最後乙個功能，同時也是最重要和複雜的功能。在我們的**裡，stack-item的排序依賴繫結:style的transformindex和transform函式，函式裡判定的條件是currentpage，那是不是改變currentpage，讓其+1，即可完成重新堆疊呢？

答案沒有那麼簡單，因為我們滑出是動畫效果，會進行300ms的時間，而currentpage變化引起的重排，會立即變化，打斷動畫的進行。因此我們需要先修改transform函式的排序條件，後改變currentpage。

#### 具體實現

**如下：

ok~ 完成了上面的四步，堆疊元件的基本功能就已經實現，快來看看效果吧

堆疊滑動效果已經出來了，但是探探在體驗上，還增加了觸碰角度偏移，以及判定滑出面積比例

角度偏移的原理，是在使用者每次進行touch時，記錄使用者觸碰位置，計算出最大的偏移角度，在滑動出現位移時，線性增加角度以至最大的偏移角度。

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

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

完整的**和demo可以在github上檢視原始碼，這裡就不貼出來了

分享我寫的另乙個vue-slider元件

vue-consise-slider

最近在找新工作，座標廣州，三年前端經驗，熟悉vue，有工作介紹的朋友可以郵箱聯絡我[email protected]