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


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下

wxml:

<view 
bindtouchstart="touchStart" 
bindtouchmove="touchMove" 
bindtouchend="touchEnd" >
</view>

index.js:

var touchStartX = 0;//触摸时的原点 
var touchStartY = 0;//触摸时的原点 
var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动 
var interval = "";// 记录/清理时间记录 
var touchMoveX = 0; // x轴方向移动的距离
var touchMoveY = 0; // y轴方向移动的距离

Page({

// 触摸开始事件 
 touchStart: function (e) {
 touchStartX = e.touches[0].pageX; // 获取触摸时的原点 
 touchStartY = e.touches[0].pageY; // 获取触摸时的原点 
 // 使用js计时器记录时间 
 interval = setInterval(function () {
  time++;
 }, 100);
 },
 // 触摸移动事件 
 touchMove: function (e) {
 touchMoveX = e.touches[0].pageX;
 touchMoveY = e.touches[0].pageY;
 },
 // 触摸结束事件 
 touchEnd: function (e) {
 var moveX = touchMoveX - touchStartX
 var moveY = touchMoveY - touchStartY
 if (Math.sign(moveX) == -1) {
  moveX = moveX * -1
 }
 if (Math.sign(moveY) == -1) {
  moveY = moveY * -1
 }
 if (moveX <= moveY) {// 上下
  // 向上滑动
  if (touchMoveY - touchStartY <= -30 && time < 10) {
  console.log("向上滑动")
  }
  // 向下滑动 
  if (touchMoveY - touchStartY >= 30 && time < 10) {
  console.log('向下滑动 ');
  }
 }else {// 左右
  // 向左滑动
  if (touchMoveX - touchStartX <= -30 && time < 10) {
  console.log("左滑页面")
  }
  // 向右滑动 
  if (touchMoveX - touchStartX >= 30 && time < 10) {
  console.log('向右滑动');
  }
 }
 clearInterval(interval); // 清除setInterval 
 time = 0;
 }, 
})

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

Javascript 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
javascript中new关键字详解
Dec 14 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
You might like
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python正则表达式match和search用法实例
2015/03/26 Python
彻底理解Python list切片原理
2017/10/27 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python快速排序算法实例分析
2017/11/29 Python
python实现媒体播放器功能
2018/02/11 Python
wxpython绘制音频效果
2019/11/18 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
小学教师年度个人总结
2015/02/05 职场文书
酒店前台辞职书
2015/02/26 职场文书
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技