原標題：Vue 仿探探拖拽卡片的效果

已更新Vue3版，請給前端大全發送關鍵字vue3仿探探獲取Vue3版

類似 Tinder 和 探探 的卡片效果的組件，社區中已經非常多了。我這一版除了可以實現和他們一樣的效果外。還增加了 飛卡 的效果，就是類似我的女神邱淑貞這樣。

可以將卡片朝任意拖拽方向飛出去，必須得 帥 是不是！

下面帶大家一步步來實現這個效果

先疊起來

咱們這次不要求在weex里可用，所以疊起來非常簡單。

首先讓三個卡片按照 近大遠小 的原則分別設置設置 z-index ，寬和高，比如每一層卡片的寬和高比上一層卡片要縮小20個像素(還有一種做法是通過zoom或者scale來設置遠處卡片的縮小級別)。然后加入絕對定位 position:absolute 和 z-index 就可以將卡片層疊起來了。

拖動第一張卡

因為只有第一張卡片可以拖動，所以我們只要監聽第一張卡片的拖動事件。比如 touchstart , touchmove , touchcancel , touchend 。

拖動的時候需要注意，在 touchstart 的時候記錄一下手指按下的位置，在 touchmove 時要減去這個位置，看上去就是點哪兒從哪兒拖。

touchStart: function( e){

varcurTouch=e.touches[ 0];

this.startLeft=curTouch.clientX- this.left;

this.startTop=curTouch.clientY- this.top;

}

touchMove: function( e){

varcurTouch=e.touches[ 0];

this.left=curTouch.clientX- this.startLeft;

this.top=curTouch.clientY- this.startTop;

}

飛出去

要實現超任意拖拽方向飛出去這個效果，需要用到一些數學公式。

計算卡片當前拖拽的坐標和起始坐標的夾角

varangle= Math.atan2((當前坐標.y-起點坐標.y), (當前坐標.x-起點坐標.x));

飛出去的落點 x 軸坐標通過計算angle的余弦值再乘以力度得出

this.left= Math.cos(angle)* this.throwDistance;

飛出去的落點 y 軸坐標通過計算angle的正弦值再乘以力度得出

this.top= Math.sin(angle)* this.throwDistance;

這里咱們做得再完善一些，在拖動結束時去判斷一下當前拖動的距離是否足夠觸發飛卡效果。如果不觸發飛卡效果，則觸發回位效果。這樣的話也可以防止用戶誤操作。

//計算兩點之間的直線距離

getDistance: function( x1, y1, x2, y2){

var_x = Math.abs(x1 - x2);

var_y = Math.abs(y1 - y2);

returnMath.sqrt(_x * _x + _y * _y);

}

vardistance= this.getDistance( 0, 0, this.left, this.top);

if(distance> this.throwTriggerDistance){

this.makeCardThrow;

} else{

this.makeCardBack;

}

下層的卡片上推

上推其實很簡單，一開始的時候，我就定義了四張( 不是3張嗎？怎么變4張了 )卡片的大小和位置。

當第一張卡飛出去后

第2張卡片變更為原本第1張卡片的位置和大小

this.width2=

this.cardWidth;

this.height2= this.cardHeight;

this.left2= 0;

this.top2= 0;

第3張卡片變更為原本第2張卡片的位置和大小

this.width3=(

this.cardWidth-

this.leftPad*

2);

this.height3=( this.cardHeight- this.topPad* 2);

this.left3= this.leftPad;

this.top3=( this.topPad* 3);

第4張卡片原本是透明的，現在變為第3張卡片的位置和大小

this.width4=(

this.cardWidth-

this.leftPad*

4);

this.height4=( this.cardHeight- this.topPad* 4);

this.left4= this.leftPad* 2;

this.top4=( this.topPad* 6);

this.opacity4= 1;

我把陰影效果先去掉，大家觀察一下這個細節

重置所有卡片

底層的卡片上推和第一張卡片的飛出效果是同時進行的，由css的 transition 來控制。不過時間是我們設定好的，所以只要在上推和飛出的動畫時間結束后，我們重置一下所有4張卡片的大小和位置即可。

this.onThrowStart;

setTimeout( function( ){

that.isThrow= false;

that.isAnimating= false;

that.onThrowDone;

that.resetAllCard;

}, 400);

這里需要注意，所有四張卡片都需要 瞬間 完成重置，所以這步之前應該禁用掉transition動畫。

組件化

為了適應各種使用場景，我們要將這個效果封裝一下。

//提供幾個事件，分別是拖動時，拖動結束，飛卡結束，飛卡失敗(回位)

@onDragMove= 'onCardDragMove'

@onDragStop= 'onCardDragStop'

@onThrowDone= 'onCardThrowDone'

@onThrowFail= 'onCardThrowFail'

//參數就不細說了，都能看明白

:cardWidth= "200"

:cardHeight= "200"

cardBgColor= "#fff"

:leftPad= "10"

:topPad= "6"

:borderRadius= "8"

:throwTriggerDistance= "100"

dragDirection= "all"

:hasShadow= "false"

:hasBorder= "true"

提供三個slot，你可以非常方便的往卡片里塞內容

//firstCard，secondCard，thirdCard

< /slot>

現在來模仿幾個效果 某乎的推薦回答 @onDragMove= 'onCardDragMove'

@onDragStop= 'onCardDragStop'

@onThrowDone= 'onCardThrowDone'

:cardWidth= "300"

:cardHeight= "120"

:throwTriggerDistance= "100"

dragDirection= "horizontal"

:hasShadow= "true"

僅允許水平拖動

由于改變寬高會導致文字換行變化，也許卡片用縮放的話，用戶體驗會更好一些吧

探探的效果

實現探探效果的核心是監聽卡片拖動的位置

onCardDragMove(obj){

if(obj.left< -10){

this.actionName= "不喜歡";

} elseif(obj.left> 10){

this.actionName= "喜歡";

} else{

this.actionName= "";

}

}

源碼倉庫

https://github.com/ezshine/ezflycard

已更新Vue3版，請給 前端大全 發送關鍵字 vue3仿探探獲取Vue3版 返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。