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


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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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 iconv函数的使用详解
2013/06/09 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
重定向实现代码
2006/11/20 Javascript
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
js实现列表按字母排序
2020/08/11 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
Python实现简单字典树的方法
2016/04/29 Python
python常见的格式化输出小结
2016/12/15 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
学校评语大全
2014/05/06 职场文书
企业口号大全
2014/06/12 职场文书
班级体育活动总结
2014/07/05 职场文书
公司岗位说明书
2015/10/08 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
工程移交协议书
2016/03/24 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python