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上结束,判定为右滑。左滑则相反。

  • 相关阅读:
    httpclient5:信任所有证书,调用公众号接口
    驾驶技能考试系统:常见故障原因分析及排除
    C#:Combox实现key,value
    C#:密码框的两种方式
    C#:动态添加或删除控件,并根据控件名称获得控件
    微服务设计模式
    微服务设计模式
    微服务设计模式
    微服务设计模式
    微服务设计模式
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5447404.html
Copyright © 2011-2022 走看看