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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
对layui中表单元素的使用详解
Aug 15 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 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操作mysql数据库
2009/03/19 PHP
php中大括号作用介绍
2012/03/22 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python中decorator使用实例
2015/04/14 Python
Python安装第三方库的3种方法
2015/06/21 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
类和结构的区别
2012/08/15 面试题
业务主管岗位职责范本
2013/12/25 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
校园演讲稿汇总
2014/05/21 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
生产车间标语
2014/06/11 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
工作时间调整通知
2015/04/24 职场文书
护理心得体会范文
2016/01/22 职场文书