经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序手势滑动卡片案例
来源：cnblogs　　作者：RanceLotus　　时间：2018/12/6 10:21:33　　对本文有异议

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

效果图：

首先是卡片布局的实现：

　　　　　　　　图片（一）

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

代码：


  1. //设置position: absolute; left：50%；后，再 margin-left:负(一半的width)；可以实现水平居中
  2. //同理，设置top：50%；margin-top：负（一半height）;可以实现垂直居中
  1. .body-swiper {
  2.   width: 680rpx;//rpx是为了适应屏幕
  3.   height: 900rpx;
  4.   left: 50%;
  5.   position: absolute;
  6.   margin-left: -340rpx;
  7.   z-index: 3;
  8.   box-sizing: border-box;
  9.   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset;
  10.   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  11.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  12.   border-radius: 12px;
  13. }.body-swiper2 {
  14.   width: 640rpx;
  15.   height: 900rpx;
  16.   left: 50%;
  17.   position: absolute;
  18.   margin-left: -320rpx;
  19.   z-index: 2;
  20.   box-sizing: border-box;
  21.   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset;
  22.   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  23.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  24.   border-radius: 12px;
  25. }.body-swiper3 {
  26.   width: 605rpx;
  27.   height: 900rpx;
  28.   left: 50%;
  29.   position: absolute;
  30.   margin-left: -302.5rpx;
  31.   z-index: 1;
  32.   box-sizing: border-box;
  33.   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 60px rgba(0, 0, 0, 0.06) inset;
  34.   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  35.   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  36.   border-radius: 12px;
  37. }

接下来，是卡片手势的实现；

上代码：

  1.   /**
  2.    *  卡片1手势   */
  3.   touchstart1: function (event) {
  4.     touchDotX = event.touches[0].pageX; // 获取触摸时的原点touchDotY = event.touches[0].pageY;
  5.     console.log("起始点的坐标X:" + touchDotX);
  6.     console.log("起始点的坐标Y:" + touchDotY);
  7.   },  // 移动结束处理动画
  8.   touchend1: function (event) {// 手指离开屏幕时记录的坐标let touchMoveX = event.changedTouches[0].pageX;
  9.     let touchMoveY = event.changedTouches[0].pageY;// 起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之差let tmX = touchMoveX - touchDotX;
  10.     let tmY = touchMoveY - touchDotY;// 两点横纵坐标差的绝对值let absX = Math.abs(tmX);
  11.     let absY = Math.abs(tmY);//起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之间的距离let delta = Math.sqrt(absX * absX + absY * absY);
  12.     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) {
  13.           console.log("左滑=====");          // 执行左滑动画  this.Animation1(-500);          // 如更tmX>0，即(离开点的X)-(起始点X)大于0 ，判定为右滑} else {
  14.           console.log("右滑=====");          // 执行右滑动画  this.Animation1(500);
  15.         }// 如果 |x0-x1|<|y0-y1|,即absX<abxY,判定为上下滑动  } else {// 如更tmY<0，即(离开点的Y)-(起始点Y)小于0 ，判定为上滑if (tmY < 0) {
  16.           console.log("上滑动=====");          this.setData({
  17.             isFront1: !this.data.isFront1
  18.           });          // 如更tmY>0，即(离开点的Y)-(起始点Y)大于0 ，判定为下滑} else {
  19.           console.log("下滑动=====");          this.setData({
  20.             isFront1: !this.data.isFront1
  21.           });
  22.         }
  23.       }
  24.     } else {
  25.       console.log("手势未触发=====");
  26.     }// 让上一张卡片展现正面（如果之前翻转过的话）this.setData({
  27.       isFront3: true,
  28.     });
  29.   }

为了更直观的看到手势触发的条件，我画了一张图：

　　　　　　　　　　　　　　　　图片（二）

最后是动画的编写；

上代码：

  1.  /**
  2.    * 卡片1:
  3.    * 左滑动右滑动动画   */
  4.   Animation1: function (translateXX) {
  5.     let animation = wx.createAnimation({
  6.       duration: 680,
  7.       timingFunction: "ease",
  8.     });this.animation = animation;// 如果大于0，判定是右滑动画，否则左滑if (translateXX > 0) {      this.animation.translateY(0).rotate(20).translateX(translateXX).opacity(0).step();
  9.     } else {      this.animation.translateY(0).rotate(-20).translateX(translateXX).opacity(0).step();
  10.     }// 设置10ms，视觉欺骗，直接归位到原来位置this.animation.translateY(0).translateX(0).opacity(1).rotate(0).step({
  11.       duration: 10});this.setData({
  12.       animationData1: this.animation.export(),
  13.     });// 动画结束后重拍三张卡片setTimeout(() => {      this.setData({
  14.         ballTop1: 220,
  15.         ballLeft1: -302.5,
  16.         ballWidth1: 605,
  17.         index1: 1,
  18.  
  19.         ballTop2: 240,
  20.         ballLeft2: -340,
  21.         ballWidth2: 680,
  22.         index2: 3,
  23.  
  24.         ballTop3: 230,
  25.         ballLeft3: -320,
  26.         ballWidth3: 640,
  27.         index3: 2,
  28.       })
  29.     }, 500);
  30.   }

如此一来，大功告成，我自己测试了几次，暂时没有发现什么大问题。如果你有更好的实现方法，欢迎留言。

代码已上传到github:

https://github.com/RanceLotusLee/card_test.git

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号