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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
js改变Iframe中Src的方法
May 05 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 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+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python中的自省(反射)详解
2015/06/02 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
考博自荐信
2013/10/25 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
销售经理工作职责
2014/02/03 职场文书
房产公证书范本
2014/04/10 职场文书
詹天佑教学反思
2014/04/30 职场文书
工会换届选举方案
2014/05/21 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Vue深入理解插槽slot的使用
2022/08/05 Vue.js