最近工作中有項目要使用微信小程序技術進行開發，其中一項功能困擾了我很久，卡片滑動動效以及手勢識別。經過一番研究和參考，現在把成果展示。記錄自己踩到的坑，如果大家有需要，也可以幫助到大家。
效果圖：
首先是卡片布局的實現：
圖片（一）
如圖所示，我采用絕對定位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, }); }為了更直觀的看到手勢觸發的條件，我畫了一張圖：
圖片（二）
最后是動畫的編寫；
上代碼：
/** * 卡片1: * 左滑動右滑動動畫 */ Animation1: function (translateXX) { let animation = wx.createAnimation({ duration: 680, timingFunction: "ease", }); this.animation = animation; // 如果大于0，判定是右滑動畫，否則左滑 if (translateXX > 0) { this.animation.translateY(0).rotate(20).translateX(translateXX).opacity(0).step(); } else { this.animation.translateY(0).rotate(-20).translateX(translateXX).opacity(0).step(); } // 設置10ms，視覺欺騙，直接歸位到原來位置 this.animation.translateY(0).translateX(0).opacity(1).rotate(0).step({ duration: 10 }); this.setData({ animationData1: this.animation.export(), }); // 動畫結束后重拍三張卡片 setTimeout(() => { this.setData({ ballTop1: 220, ballLeft1: -302.5, ballWidth1: 605, index1: 1, ballTop2: 240, ballLeft2: -340, ballWidth2: 680, index2: 3, ballTop3: 230, ballLeft3: -320, ballWidth3: 640, index3: 2, }) }, 500); }如此一來，大功告成，我自己測試了幾次，暫時沒有發現什么大問題。如果你有更好的實現方法，歡迎留言。
代碼已上傳到github
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
