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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
在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遍历目录viewDir函数
2009/12/15 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
numpy中索引和切片详解
2017/12/15 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
企业后勤岗位职责
2014/02/28 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
共青团员自我评价
2015/03/10 职场文书
人事任命书范本
2015/09/21 职场文书
委托书范本格式
2019/04/18 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Python制作动态字符画的源码
2021/08/04 Python