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


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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
详解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
用PHP编写PDF文档生成器
2006/10/09 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python修改MP3文件的方法
2015/06/15 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
元宵节晚会主持人串词
2014/03/25 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
财务会计岗位职责
2015/02/03 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript