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 相关文章推荐
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
Typescript的三种运行方式(小结)
Sep 18 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
Drupal简体中文语言包安装教程
2014/09/27 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
js实现验证码干扰(动态)
2021/02/23 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
2014年班组长工作总结
2014/11/20 职场文书
校友回访母校寄语
2015/02/26 职场文书
李强优秀员工观后感
2015/06/16 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL