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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
vue实现购物车案例
May 30 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获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python编码类型转换方法详解
2016/07/01 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Python实现结构体代码实例
2020/02/10 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 如何上传包到pypi
2020/12/24 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
上班迟到检讨书
2014/01/10 职场文书
2014的自我评价
2014/01/13 职场文书
投标承诺书怎么写
2014/05/24 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
python实现简单的名片管理系统
2021/04/26 Python