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


Posted in Javascript onAugust 26, 2019

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

效果图:

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

首先是卡片布局的实现:

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

图片(一)

如图所示,我采用绝对定位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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
javascript时间差插件分享
Jul 18 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python实现ID3决策树算法
2017/12/20 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
如何查看python关键字
2021/01/17 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
中专毕业生个人职业生涯规划
2014/02/19 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
上课说话检讨书500字
2014/11/01 职场文书
个人工作总结范文2014
2014/11/07 职场文书
先进单位事迹材料
2014/12/25 职场文书
公司市场部岗位职责
2015/04/15 职场文书
奔腾年代观后感
2015/06/09 职场文书
社团招新宣传语
2015/07/13 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis