微信小程序实现手势滑动卡片效果

最近工作中有项目要使用微信小程序技术进行开发，其中一项功能困扰了我很久，卡片滑动动效以及手势识别。经过一番研究和参考，现在把成果展示。记录自己踩到的坑，如果大家有需要，也可以帮助到大家。

效果图：

首先是卡片布局的实现：

图片（一)

如图所示，我采用绝对定位绝对的的方式，辅助指数，可以实现卡片的层叠效果。注意：三张卡片一定都是相同的定位，否则指数可能不起作用。

代码：

//设置绝对位置：左：50%;后，再左边距：负（一半的宽度);可以实现水平居中//同理，设置最高：50%;上边距：负（一半高度);可以实现垂直居中车身开关{宽度： 680 rpx//rpx是为了适应屏幕高度： 900 rpx左侧： 50%;绝对位置：左边距：-340 rpx；z-index : 3；盒子尺寸：边框盒子；-web套件-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 60px rgba(0，0，0.06)插图；-moz-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；box-shadow: 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；边界半径： 12px} .body-swiper 2 {宽度： 640 rpx高度： 900 rpx左侧： 50%;绝对位置：左边距：-320 rpx；z-index : 2；盒子尺寸：边框盒子；-web套件-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 60px rgba(0，0，0.06)插图；-moz-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；box-shadow: 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；边界半径： 12px} .body-swiper 3 {宽度： 605 rpx高度： 900 rpx左侧： 50%;绝对位置：左边距：-302.5 rpx；z-index : 1；盒子尺寸：边框盒子；-web套件-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 60px rgba(0，0，0.06)插图；-moz-box-shadow : 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；box-shadow: 0 1px 4px rgba(0，0，0，0.62)，0 0 40px rgba(0，0，0.06)插图；边界半径： 12px}接下来，是卡片手势的实现；

上代码：

/* * *卡片1手势*/touchstart1:函数(事件){touchdotx=event。触摸[0]。pagex//获取触摸原点touchdoty=event。触摸[0]。佩吉；Console.log('起点坐标x : ' TouchDotx)；Console.log('起点坐标y : ' TouchDoty)；}，//动画touchend 1:函数(事件){//手指离开屏幕时记录的坐标让touch movex=event。changedtouches。pagex让Touchmovey=event . changedTouchs[0]。佩吉；//起点的坐标(x0，y0)与手指离开时的坐标(x1，y1)之差，设tmX=touch movex-touch dotx；让tmY=touch movey-touch doty；//两点的水平坐标和垂直坐标之差的绝对值，让absX=math . ABS(tmX)；让absY=math . ABS(TMy)；//手指离开时起点的坐标(x0，y0)与坐标(x1，y1)的距离，设delta=math . sqrt(absx * absxabsy * absy)；Console.log('起始点和离开点之间的距离为： ' delta ' px ')；//如果delta超过60px(可自行酌情微调)，则判断为手势触发If(delta=60){//If | x0-x1 | | y0-y1 |，即absXabxY，判断为左右滑动if (absX absY) {//如果大于tmX0，即(x从点开始)-(起点x)//执行此处的左滑动画。动画1(-500)；//如果tmX0发生变化，即(起点x)-(起点x)大于0，则判断为右滑} else {console.log('右滑====')；//执行右边的幻灯片动画。动画1(500)；}//如果|x0-x1||y0-y1|，即absXabxY，则判断为上下滑动} else {//如果tmY0，即(出发点的y)-(出发点的y)小于0，则判断为上下滑动如果(tmY 0) {console.log('向上滑动=====)this . setdata({ isfront 1:this . data . Isfront 1 })；//如果tmY0发生变化，即(离起点Y)-(离起点Y)大于0，则判断为sliding } else { console . log(' sliding down===')；this.setData({ isFront1:this . data . Isfront 1 })；}}} else {console.log('未触发的手势====')；}//让前一张牌显示正面(如果之前翻过)这个。setdata ({isfront : true，})；}为了更直观地看到手势触发的条件，我画了一幅图：

图片(2)

最后是动画的编写；

代码开启：

/* * *卡片1: *左右滑动动画*/动画1:功能(翻译xx){让动画=wx。创建动画({持续时间： 680，定时功能3360' ease '，})；this.animation=动画；//如果大于0，则判断为右滑动画，否则为左滑if (translatex0) {this。动画。translatey (0)。旋转(20)。translatex (translatexx)。不透明度(0)。step()；} else { this . animation . translatey(0)。旋转(-20)。translateX(translateXX)。不透明度(0)。step()；}//设置10ms，视觉欺骗，这次回到原来的位置。动画。translatey (0)。translatex (0)。不透明度(1)。旋转(0)。step({ duration : 10 })；this . setdata({ animationData1: this . animation . export()，})；//动画后翻拍三张牌：settimeout()={ this . setdata({ ball top 1: 220，ballleft1:-302.5，ballwidth 1: 605，index 1: 1，balltop2: 240，ballLeft2: -340，ballWidth2: 680，index2: 3，ballTop3: 230，}结果，你完蛋了。我自己测试了几次，暂时没有发现大问题。如果你有更好的实现方法，请留言。

代码已上传到github

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。