JS实现移动端判断上拉和下滑功能


Posted in Javascript onAugust 07, 2017

一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。

二、js中距离:pageY、clientY、offsetY的区别:

       offsetY:相对于父节点的偏移距离。

       clientY:相对于浏览器,滚轮距离不算在内。

       pageY:相对于浏览器,滚轮滚动的距离算在内;本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑。 

三、touchstart有touches属性,touchend有changedTouches属性,两个属性中分别有pageY、pageX信息。

//滑动处理 
    var startX, startY; 
    document.addEventListener('touchstart',function (ev) { 
      startX = ev.touches[0].pageX; 
      startY = ev.touches[0].pageY; 
    }, false); 
    document.addEventListener('touchend',function (ev) { 
      var endX, endY; 
      endX = ev.changedTouches[0].pageX; 
      endY = ev.changedTouches[0].pageY; 
      var direction = GetSlideDirection(startX, startY, endX, endY); 
      switch(direction) { 
        case 0: 
            alert("无操作"); 
          break; 
        case 1: 
          // 向上 
          alert("up"); 
          break; 
        case 2: 
          // 向下 
          alert("down"); 
          break; 
 
        default: 
      } 
    }, false);

四、

function GetSlideDirection(startX, startY, endX, endY) { 
      var dy = startY - endY; 
      //var dx = endX - startX; 
      var result = 0; 
      if(dy>0) {//向上滑动 
        result=1; 
      }else if(dy<0){//向下滑动 
        result=2; 
      } 
      else 
      { 
        result=0; 
      } 
      return result; 
    }

总结

以上所述是小编给大家介绍的JS实现移动端判断上拉和下滑功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
js字符串处理之绝妙的代码
Apr 05 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 #Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 #Javascript
bootstrap Table插件使用demo
Aug 07 #Javascript
You might like
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
Javascript中神奇的this
2016/01/20 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
python简单判断序列是否为空的方法
2015/06/30 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
建设工地安全标语
2014/06/07 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers