JS实现移动端判断上拉和下滑功能

一、手指触屏，利用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实现移动端判断上拉和下滑功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js插件dropload上拉下滑加载数据实例解析

    js插件dropload上拉下滑加载数据实例解析

    本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下 效果图: 1.导入js  dropload.min.js  zepto.min.js    <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --> 2.后台查询 /** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransactio

  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll

  • js实现鼠标感应向下滑动隐藏菜单的方法

    本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

  • 基于JavaScript实现鼠标向下滑动加载div的代码

    废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new

  • JS实现网页顶部向下滑出的全国城市切换导航效果

    JS实现网页顶部向下滑出的全国城市切换导航效果

    本文实例讲述了JS实现网页顶部向下滑出的全国城市切换导航效果.分享给大家供大家参考.具体如下: 这是一款JS版网页顶部向下滑出的城市切换导航,仿sohu团购网页顶部的城市导航切换,从顶部向下滑出,方便在其他城市之间切换.使用了sohu网原版的一个JS封装插件来实现,目前只是为了演示,所以全国城市不全,使用者自己添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-scroll-city-cha-style-codes/ 具体代码

  • JS实现移动端判断上拉和下滑功能

    一.手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑. 二.js中距离:pageY.clientY.offsetY的区别: offsetY:相对于父节点的偏移距离. clientY:相对于浏览器,滚轮距离不算在内. pageY:相对于浏览器,滚轮滚动的距离算在内:本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑. 三.touchstart有touches属性,touchend有changedTouc

  • vux-scroller实现移动端上拉加载功能过程解析

    vux-scroller实现移动端上拉加载功能过程解析

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库: vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面.基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在We

  • mui上拉加载功能实例详解

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

  • node.js express框架实现文件上传与下载功能实例详解

    本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.

  • vue中el-autocomplete支持分页上拉加载功能

    目录 el-autocomplete使用 template 实现需求分析 1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 2. 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 3.滚动加载指令(监听容器的scroll事件并进行防抖处理) 4. 分页加载 4.0 获取数据,并进行格式化 4.1 关闭加载圈 4.2 分页加载事件 4.3 清空输入框,重置上次记录的数据 4.4 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 总结 e

  • vue.js整合vux中的上拉加载下拉刷新实例教程

    vue.js整合vux中的上拉加载下拉刷新实例教程

    前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图 创建项目 使用vue-cli 创建一个vue项目 安装vux

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • Ionic如何实现下拉刷新与上拉加载功能

    IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程

  • 基于vue2实现上拉加载功能

    本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下 因为我们项目中,还用了swiper.很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个.代码如下(这个因为很多地方会用,所以建议放在components/common下面): <template> <div class="loadmore"> <slot></slot> <slot nam

随机推荐