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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
浅谈React中组件间抽象
2018/01/27 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Django之路由层的实现
2019/09/09 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
教师自我鉴定范文
2013/11/10 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
家长会后的感想
2015/08/11 职场文书
创业计划书之酒吧
2019/12/02 职场文书