最近工作中有項目要使用微信小程序技術進行開發，其中一項功能困擾了我很久，卡片滑動動效以及手勢識別。經過一番研究和參考，現在把成果展示。記錄自己踩到的坑，如果大家有需要，也可以幫助到大家。

效果圖：

首先是卡片布局的實現：

圖片（一）

如圖所示，我采用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意：三張卡片一定都是相同的定位，否則index可能不起作用。

代碼：

//設置position: absolute; left：50%；后，再 margin-left:負(一半的width)；可以實現水平居中//同理，設置top：50%；margin-top：負（一半height）;可以實現垂直居中.body-swiper { width: 680rpx;//rpx是為了適應屏幕 height: 900rpx; left: 50%; position: absolute; margin-left: -340rpx; z-index: 3; box-sizing: border-box; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; border-radius: 12px;} .body-swiper2 { width: 640rpx; height: 900rpx; left: 50%; position: absolute; margin-left: -320rpx; z-index: 2; box-sizing: border-box; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; border-radius: 12px;} .body-swiper3 { width: 605rpx; height: 900rpx; left: 50%; position: absolute; margin-left: -302.5rpx; z-index: 1; box-sizing: border-box; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset; border-radius: 12px;}

接下來，是卡片手勢的實現；

上代碼：

/** * 卡片1手勢 */ touchstart1: function (event) { touchDotX = event.touches[0].pageX; // 獲取觸摸時的原點 touchDotY = event.touches[0].pageY; console.log("起始點的坐標X:" + touchDotX); console.log("起始點的坐標Y:" + touchDotY); }, // 移動結束處理動畫 touchend1: function (event) { // 手指離開屏幕時記錄的坐標 let touchMoveX = event.changedTouches[0].pageX; let touchMoveY = event.changedTouches[0].pageY; // 起始點的坐標(x0,y0)和手指離開時的坐標(x1,y1)之差 let tmX = touchMoveX - touchDotX; let tmY = touchMoveY - touchDotY; // 兩點橫縱坐標差的絕對值 let absX = Math.abs(tmX); let absY = Math.abs(tmY); //起始點的坐標(x0,y0)和手指離開時的坐標(x1,y1)之間的距離 let delta = Math.sqrt(absX * absX + absY * absY); console.log('起始點和離開點距離:' + delta + 'px'); // 如果delta超過60px（可以視情況自己微調）,判定為手勢觸發 if (delta >= 60) {  // 如果 |x0-x1|>|y0-y1|,即absX>abxY,判定為左右滑動  if (absX > absY) {  // 如更tmX<0，即(離開點的X)-(起始點X)小于0 ，判定為左滑  if (tmX < 0) {   console.log("左滑=====");   // 執行左滑動畫   this.Animation1(-500);   // 如更tmX>0，即(離開點的X)-(起始點X)大于0 ，判定為右滑  } else {   console.log("右滑=====");   // 執行右滑動畫   this.Animation1(500);  }  // 如果 |x0-x1|<|y0-y1|,即absX<abxY,判定為上下滑動  } else {  // 如更tmY<0，即(離開點的Y)-(起始點Y)小于0 ，判定為上滑  if (tmY < 0) {   console.log("上滑動=====");   this.setData({   isFront1: !this.data.isFront1   });   // 如更tmY>0，即(離開點的Y)-(起始點Y)大于0 ，判定為下滑  } else {   console.log("下滑動=====");   this.setData({   isFront1: !this.data.isFront1   });  }  } } else {  console.log("手勢未觸發====="); }  // 讓上一張卡片展現正面（如果之前翻轉過的話） this.setData({  isFront3: true, }); }