前言
嗨，說起探探想必各位程式汪都不陌生(畢竟妹子很多)，能在上面絲滑的翻牌子，探探的的堆疊滑動元件起到了關鍵的作用，下面就來看看如何用vue寫一個探探的堆疊元件 ?
一. 功能分析
簡單使用下探探會發現，堆疊滑動的功能很簡單，用一張圖概括就是:
簡單歸納下里麵包含的基本功能點:
- 圖片的堆疊
- 圖片第一張的滑動
- 條件成功後的滑出，條件失敗後的回彈
- 滑出後下一張圖片堆疊到頂部
體驗優化
- 根據觸控點的不同，滑動時首圖有不同角度偏移
- 偏移面積判定是否成功滑出
二. 具體實現
有了歸納好的功能點，我們實現元件的思路會更清晰
1. 堆疊效果
堆疊圖片效果在網上有大量的例項，實現的方法大同小異，主要通過在父層設定perspective及perspective-origin，來實現子層的透視，子層設定好translate3d Z軸數值即可模擬出堆疊效果，具體程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// 圖片堆疊dom <!--opacity: 0 隱藏我們不想看到的stack-item層級--> <!--z-index: -1 調整stack-item層級"--> <ul class="stack"> <li class="stack-item" style="transform: translate3d(0px, 0px, 0px);opacity: 1;z-index: 10;"><img src="1.png" alt="01"></li> <li class="stack-item" style="transform: translate3d(0px, 0px, -60px);opacity: 1;z-index: 1"><img src="2.png" alt="02"></li> <li class="stack-item" style="transform: translate3d(0px, 0px, -120px);opacity: 1;z-index: 1"><img src="3.png" alt="03"></li> <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="4.png" alt="04"></li> <li class="stack-item" style="transform: translate3d(0px, 0px, -180px);opacity: 0;z-index: -1"><img src="5.png" alt="05"></li> </ul> <style> .stack { width: 100%; height: 100%; position: relative; perspective: 1000px; //子元素視距 perspective-origin: 50% 150%; //子元素透視位置 -webkit-perspective: 1000px; -webkit-perspective-origin: 50% 150%; margin: 0; padding: 0; } .stack-item{ background: #fff; height: 100%; width: 100%; border-radius: 4px; text-align: center; overflow: hidden; } .stack-item img { width: 100%; display: block; pointer-events: none; } </style> |
上面只是一組靜態程式碼，我們希望得到的是vue元件，所以需要先建立一個元件模板stack.vue，在模板中我們可以使用v-for，遍歷出stack節點，使用:style 來修改各個item的style，程式碼如
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<template> <ul class="stack"> <li class="stack-item" v-for="(item, index) in pages" :style="[transform(index)]"> <img :src="item.src"> </li> </ul> </template> <script> export default { props: { // pages資料包含基礎的圖片資料 pages: { type: Array, default: [] } }, data () { return { // basicdata資料包含元件基本資料 basicdata: { currentPage: 0 // 預設首圖的序列 }, // temporaryData資料包含元件臨時資料 temporaryData: { opacity: 1, // 記錄opacity zIndex: 10, // 記錄zIndex visible: 3 // 記錄預設顯示堆疊數visible } } }, methods: { // 遍歷樣式 transform (index) { if (index >= this.basicdata.currentPage) { let style = {} let visible = this.temporaryData.visible let perIndex = index - this.basicdata.currentPage // visible可見數量前滑塊的樣式 if (index <= this.basicdata.currentPage + visible - 1) { style['opacity'] = '1' style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')' style['zIndex'] = visible - index + this.basicdata.currentPage style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } else { style['zIndex'] = '-1' style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')' } return style } } } } </script> |
關鍵點
- :style可以繫結物件的同時，也可以繫結陣列和函式，這在遍歷的時候很有用
最基本的dom結構已經構建完畢，下一步是讓首張圖片“動”起來
2. 圖片滑動
圖片滑動效果，在很多場景中都有出現，其原理無非是監聽touchs事件，得到位移，再通過translate3D改變目標位移，因此我們要實現的步驟如下
- 對stack進行touchs事件的繫結
- 監聽並儲存手勢位置變化的數值
- 改變首圖css屬性中translate3D的x，y值
具體實現
在vue框架中，不建議直接操作節點，而是通過指令v-on對元素進行繫結，因此我們將繫結都寫在v-for遍歷裡，通過index進行判斷其是否是首圖，再使用:style修改首頁的樣式，具體程式碼如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<template> <ul class="stack"> <li class="stack-item" v-for="(item, index) in pages" :style="[transformIndex(index),transform(index)]" @touchstart.stop.capture="touchstart" @touchmove.stop.capture="touchmove" @touchend.stop.capture="touchend" @mousedown.stop.capture="touchstart" @mouseup.stop.capture="touchend" @mousemove.stop.capture="touchmove"> <img :src="item.src"> </li> </ul> </template> <script> export default { props: { // pages資料包含基礎的圖片資料 pages: { type: Array, default: [] } }, data () { return { // basicdata資料包含元件基本資料 basicdata: { start: {}, // 記錄起始位置 end: {}, // 記錄終點位置 currentPage: 0 // 預設首圖的序列 }, // temporaryData資料包含元件臨時資料 temporaryData: { poswidth: '', // 記錄位移 posheight: '', // 記錄位移 tracking: false // 是否在滑動，防止多次操作，影響體驗 } } }, methods: { touchstart (e) { if (this.temporaryData.tracking) { return } // 是否為touch if (e.type === 'touchstart') { if (e.touches.length > 1) { this.temporaryData.tracking = false return } else { // 記錄起始位置 this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.targetTouches[0].clientX this.basicdata.start.y = e.targetTouches[0].clientY this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } // pc操作 } else { this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.clientX this.basicdata.start.y = e.clientY this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } this.temporaryData.tracking = true }, touchmove (e) { // 記錄滑動位置 if (this.temporaryData.tracking && !this.temporaryData.animation) { if (e.type === 'touchmove') { this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } else { this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } // 計算滑動值 this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y } }, touchend (e) { this.temporaryData.tracking = false // 滑動結束，觸發判斷 }, // 非首頁樣式切換 transform (index) { if (index > this.basicdata.currentPage) { let style = {} let visible = 3 let perIndex = index - this.basicdata.currentPage // visible可見數量前滑塊的樣式 if (index <= this.basicdata.currentPage + visible - 1) { style['opacity'] = '1' style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')' style['zIndex'] = visible - index + this.basicdata.currentPage style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } else { style['zIndex'] = '-1' style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')' } return style } }, // 首頁樣式切換 transformIndex (index) { // 處理3D效果 if (index === this.basicdata.currentPage) { let style = {} style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)' style['opacity'] = 1 style['zIndex'] = 10 return style } } } } </script> |
3. 條件成功後的滑出，條件失敗後的回彈
條件的觸發判斷是在touchend/mouseup後進行，在這裡我們先用簡單的條件進行判定，同時給予首圖彈出及回彈的效果，程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<template> <ul class="stack"> <li class="stack-item" v-for="(item, index) in pages" :style="[transformIndex(index),transform(index)]" @touchmove.stop.capture="touchmove" @touchstart.stop.capture="touchstart" @touchend.stop.capture="touchend" @mousedown.stop.capture="touchstart" @mouseup.stop.capture="touchend" @mousemove.stop.capture="touchmove"> <img :src="item.src"> </li> </ul> </template> <script> export default { props: { // pages資料包含基礎的圖片資料 pages: { type: Array, default: [] } }, data () { return { // basicdata資料包含元件基本資料 basicdata: { start: {}, // 記錄起始位置 end: {}, // 記錄終點位置 currentPage: 0 // 預設首圖的序列 }, // temporaryData資料包含元件臨時資料 temporaryData: { poswidth: '', // 記錄位移 posheight: '', // 記錄位移 tracking: false, // 是否在滑動，防止多次操作，影響體驗 animation: false, // 首圖是否啟用動畫效果，預設為否 opacity: 1 // 記錄首圖透明度 } } }, methods: { touchstart (e) { if (this.temporaryData.tracking) { return } // 是否為touch if (e.type === 'touchstart') { if (e.touches.length > 1) { this.temporaryData.tracking = false return } else { // 記錄起始位置 this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.targetTouches[0].clientX this.basicdata.start.y = e.targetTouches[0].clientY this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } // pc操作 } else { this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.clientX this.basicdata.start.y = e.clientY this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } this.temporaryData.tracking = true this.temporaryData.animation = false }, touchmove (e) { // 記錄滑動位置 if (this.temporaryData.tracking && !this.temporaryData.animation) { if (e.type === 'touchmove') { this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } else { this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } // 計算滑動值 this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y } }, touchend (e) { this.temporaryData.tracking = false this.temporaryData.animation = true // 滑動結束，觸發判斷 // 簡單判斷滑動寬度超出100畫素時觸發滑出 if (Math.abs(this.temporaryData.poswidth) >= 100) { // 最終位移簡單設定為x軸200畫素的偏移 let ratio = Math.abs(this.temporaryData.posheight / this.temporaryData.poswidth) this.temporaryData.poswidth = this.temporaryData.poswidth >= 0 ? this.temporaryData.poswidth + 200 : this.temporaryData.poswidth - 200 this.temporaryData.posheight = this.temporaryData.posheight >= 0 ? Math.abs(this.temporaryData.poswidth * ratio) : -Math.abs(this.temporaryData.poswidth * ratio) this.temporaryData.opacity = 0 // 不滿足條件則滑入 } else { this.temporaryData.poswidth = 0 this.temporaryData.posheight = 0 } }, // 非首頁樣式切換 transform (index) { if (index > this.basicdata.currentPage) { let style = {} let visible = 3 let perIndex = index - this.basicdata.currentPage // visible可見數量前滑塊的樣式 if (index <= this.basicdata.currentPage + visible - 1) { style['opacity'] = '1' style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')' style['zIndex'] = visible - index + this.basicdata.currentPage style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } else { style['zIndex'] = '-1' style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')' } return style } }, // 首頁樣式切換 transformIndex (index) { // 處理3D效果 if (index === this.basicdata.currentPage) { let style = {} style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)' style['opacity'] = this.temporaryData.opacity style['zIndex'] = 10 if (this.temporaryData.animation) { style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } return style } } } } </script> |
4. 滑出後下一張圖片堆疊到頂部
重新堆疊是元件最後一個功能，同時也是最重要和複雜的功能。在我們的程式碼裡，stack-item的排序依賴繫結:style的transformIndex和transform函式，函式裡判定的條件是currentPage，那是不是改變currentPage，讓其+1，即可完成重新堆疊呢？
答案沒有那麼簡單，因為我們滑出是動畫效果，會進行300ms的時間，而currentPage變化引起的重排，會立即變化，打斷動畫的進行。因此我們需要先修改transform函式的排序條件，後改變currentPage。
#### 具體實現
- 修改transform函式排序條件
- 讓currentPage+1
- 新增onTransitionEnd事件，在滑出結束後，重新放置stack列表中
程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<template> <ul class="stack"> <li class="stack-item" v-for="(item, index) in pages" :style="[transformIndex(index),transform(index)]" @touchmove.stop.capture="touchmove" @touchstart.stop.capture="touchstart" @touchend.stop.capture="touchend" @mousedown.stop.capture="touchstart" @mouseup.stop.capture="touchend" @mousemove.stop.capture="touchmove" @webkit-transition-end="onTransitionEnd" @transitionend="onTransitionEnd" > <img :src="item.src"> </li> </ul> </template> <script> export default { props: { // pages資料包含基礎的圖片資料 pages: { type: Array, default: [] } }, data () { return { // basicdata資料包含元件基本資料 basicdata: { start: {}, // 記錄起始位置 end: {}, // 記錄終點位置 currentPage: 0 // 預設首圖的序列 }, // temporaryData資料包含元件臨時資料 temporaryData: { poswidth: '', // 記錄位移 posheight: '', // 記錄位移 lastPosWidth: '', // 記錄上次最終位移 lastPosHeight: '', // 記錄上次最終位移 tracking: false, // 是否在滑動，防止多次操作，影響體驗 animation: false, // 首圖是否啟用動畫效果，預設為否 opacity: 1, // 記錄首圖透明度 swipe: false // onTransition判定條件 } } }, methods: { touchstart (e) { if (this.temporaryData.tracking) { return } // 是否為touch if (e.type === 'touchstart') { if (e.touches.length > 1) { this.temporaryData.tracking = false return } else { // 記錄起始位置 this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.targetTouches[0].clientX this.basicdata.start.y = e.targetTouches[0].clientY this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } // pc操作 } else { this.basicdata.start.t = new Date().getTime() this.basicdata.start.x = e.clientX this.basicdata.start.y = e.clientY this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } this.temporaryData.tracking = true this.temporaryData.animation = false }, touchmove (e) { // 記錄滑動位置 if (this.temporaryData.tracking && !this.temporaryData.animation) { if (e.type === 'touchmove') { this.basicdata.end.x = e.targetTouches[0].clientX this.basicdata.end.y = e.targetTouches[0].clientY } else { this.basicdata.end.x = e.clientX this.basicdata.end.y = e.clientY } // 計算滑動值 this.temporaryData.poswidth = this.basicdata.end.x - this.basicdata.start.x this.temporaryData.posheight = this.basicdata.end.y - this.basicdata.start.y } }, touchend (e) { this.temporaryData.tracking = false this.temporaryData.animation = true // 滑動結束，觸發判斷 // 簡單判斷滑動寬度超出100畫素時觸發滑出 if (Math.abs(this.temporaryData.poswidth) >= 100) { // 最終位移簡單設定為x軸200畫素的偏移 let ratio = Math.abs(this.temporaryData.posheight / this.temporaryData.poswidth) this.temporaryData.poswidth = this.temporaryData.poswidth >= 0 ? this.temporaryData.poswidth + 200 : this.temporaryData.poswidth - 200 this.temporaryData.posheight = this.temporaryData.posheight >= 0 ? Math.abs(this.temporaryData.poswidth * ratio) : -Math.abs(this.temporaryData.poswidth * ratio) this.temporaryData.opacity = 0 this.temporaryData.swipe = true // 記錄最終滑動距離 this.temporaryData.lastPosWidth = this.temporaryData.poswidth this.temporaryData.lastPosHeight = this.temporaryData.posheight // currentPage+1 引發排序變化 this.basicdata.currentPage += 1 // currentPage切換，整體dom進行變化，把第一層滑動置零 this.$nextTick(() => { this.temporaryData.poswidth = 0 this.temporaryData.posheight = 0 this.temporaryData.opacity = 1 }) // 不滿足條件則滑入 } else { this.temporaryData.poswidth = 0 this.temporaryData.posheight = 0 this.temporaryData.swipe = false } }, onTransitionEnd (index) { // dom發生變化後，正在執行的動畫滑動序列已經變為上一層 if (this.temporaryData.swipe && index === this.basicdata.currentPage - 1) { this.temporaryData.animation = true this.temporaryData.lastPosWidth = 0 this.temporaryData.lastPosHeight = 0 this.temporaryData.swipe = false } }, // 非首頁樣式切換 transform (index) { if (index > this.basicdata.currentPage) { let style = {} let visible = 3 let perIndex = index - this.basicdata.currentPage // visible可見數量前滑塊的樣式 if (index <= this.basicdata.currentPage + visible - 1) { style['opacity'] = '1' style['transform'] = 'translate3D(0,0,' + -1 * perIndex * 60 + 'px' + ')' style['zIndex'] = visible - index + this.basicdata.currentPage style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } else { style['zIndex'] = '-1' style['transform'] = 'translate3D(0,0,' + -1 * visible * 60 + 'px' + ')' } return style // 已滑動模組釋放後 } else if (index === this.basicdata.currentPage - 1) { let style = {} // 繼續執行動畫 style['transform'] = 'translate3D(' + this.temporaryData.lastPosWidth + 'px' + ',' + this.temporaryData.lastPosHeight + 'px' + ',0px)' style['opacity'] = '0' style['zIndex'] = '-1' style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' return style } }, // 首頁樣式切換 transformIndex (index) { // 處理3D效果 if (index === this.basicdata.currentPage) { let style = {} style['transform'] = 'translate3D(' + this.temporaryData.poswidth + 'px' + ',' + this.temporaryData.posheight + 'px' + ',0px)' style['opacity'] = this.temporaryData.opacity style['zIndex'] = 10 if (this.temporaryData.animation) { style['transitionTimingFunction'] = 'ease' style['transitionDuration'] = 300 + 'ms' } return style } } } } </script> |
ok~ 完成了上面的四步，堆疊元件的基本功能就已經實現，快來看看效果吧
堆疊滑動效果已經出來了，但是探探在體驗上，還增加了觸碰角度偏移，以及判定滑出面積比例
角度偏移的原理，是在使用者每次進行touch時，記錄使用者觸碰位置，計算出最大的偏移角度，在滑動出現位移時，線性增加角度以至最大的偏移角度。
使用在stack中具體要做的是：
- touchmove中計算出所需角度和方向
- touchend及onTransitionEnd中將角度至零
判定滑出面積比例，主要通過偏移量計算出偏移面積，從而得到面積比例，完成判斷
完整的程式碼和demo可以在github上檢視原始碼，這裡就不貼出來了
謝謝大家看完這篇文章，喜歡可以在github上給個⭐️ ，最後祝大家在探探上都能找到前女友?
分享我寫的另一個vue-slider元件vue-consise-slider最近在找新工作，座標廣州，三年前端經驗，熟悉vue，有工作介紹的朋友可以郵箱聯絡我warpcgd@qq.com