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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP 正则表达式小结
2015/02/12 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
Python多线程实现同步的四种方式
2017/05/02 Python
python中什么是面向对象
2020/06/11 Python
浅谈python 类方法/静态方法
2020/09/18 Python
如何用python 操作zookeeper
2020/12/28 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
护士检查书
2014/01/17 职场文书
新店开张活动方案
2014/08/24 职场文书
自我工作评价范文
2015/03/06 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
APP界面设计技巧和注意事项
2022/04/29 杂记