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


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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
js Math 对象的方法
Sep 01 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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
php 正则 过滤html 的超链接
2009/06/02 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python实现simhash算法实例
2014/04/25 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
亲子拓展活动方案
2014/02/20 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
银行先进个人总结
2015/02/15 职场文书
保护地球的宣传语
2015/07/13 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis