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


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 相关文章推荐
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
js表单登陆验证示例
Oct 19 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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
风格模板初级不完全修改教程
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
JS event使用方法详解
2008/04/28 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
jQuery操作css样式
2017/05/15 jQuery
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
大学生创业计划书的用途
2014/01/08 职场文书
校园安全广播稿
2014/02/08 职场文书
德育标兵事迹材料
2014/08/24 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Javascript webpack动态import
2022/04/19 Javascript
Python序列化模块JSON与Pickle
2022/06/05 Python