zoukankan      html  css  js  c++  java
  • HTML5 移动端的上下左右滑动问题

    在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】
    我的方案是,通过监听滑动,阻止默认事件来完成

    div.addEventListener('touchmove',function(event){
        event.preventDefault();//阻止浏览器的默认事件
    })
    

      

    这样,左右滑动可以完成了,但是触摸这个div的时候,页面不能上下滑动了,怎么办?

    当touchmove的时候,实时改变window的scrolltop值?

    这样会有原生的滑动效果吗?

    大家有什么解决方案

    问题已经解决了,思路是

    var xx,yy,XX,YY,swipeX,swipeY ;
     div.addEventListener('touchstart',function(event){
         xx = event.targetTouches[0].screenX ;
         yy = event.targetTouches[0].screenY ;
         swipeX = true;
         swipeY = true ;
     })
     div.addEventListener('touchmove',function(event){
          XX = event.targetTouches[0].screenX ;
          YY = event.targetTouches[0].screenY ;
          if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑动
          {
              event.stopPropagation();//组织冒泡
              event.preventDefault();//阻止浏览器默认事件
              swipeY = false ;
              //左右滑动
          }
          else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑动
              swipeX = false ;
              //上下滑动,使用浏览器默认的上下滑动
          }
      })
    

      

    可以判断下move大概方向,然后水平的时候阻止默认行为,其他时候不阻止就OK了

     

    其实 单纯判断move是水平也是不行的,如果用户是斜上地滑怎么判断?

    我的想法是,在这个轮播上实现这样的一个覆盖层

    HTML5 移动端的上下左右滑动问题

    当用户从A触发了touchstart 结束或者move到b,或者b start,在c上结束,判定为右滑。左滑则相反。

  • 相关阅读:
    【转】fastjson-1.2.47-RCE
    某安全设备未授权访问+任意文件下载0day
    关于伴侣
    【转】Why BIOS loads MBR into 0x7C00 in x86 ?
    【生活】北京旅游攻略
    利用Python读取图片exif敏感信息
    A MacFUSE-Based Process File System for Mac OS X
    linux-强制断开远程tcp连接
    Navicat use HTTP Tunnel
    python mac下使用多进程报错解决办法
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5447404.html
Copyright © 2011-2022 走看看