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

  • 相关阅读:
    SPOJ NDIV
    SPOJ ETF
    SPOJ DIVSUM
    头文件--持续更新
    SPOJ FRQPRIME
    SPOJ FUNPROB
    SPOJ HAMSTER1
    观光
    最短路计数
    拯救大兵瑞恩
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5447404.html
Copyright © 2020-2023  润新知