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

  • 相关阅读:
    MoSQL
    Open Search Server 1.4 Beta3 发布
    NxWidgets 1.5 发布,NuttX的GUI开发包
    segatex 7.900 发布,SELinux 策略编辑器
    MySQL Connector/ODBC 5.2.4 发布
    Phing 2.5 发布,PHP 项目构建工具
    SwingX 1.6.5 发布,GUI 工具包
    XWiki 4.4.1 发布,Java 的 Wiki 引擎
    流言终结者——C语言内存管理
    Hudson 3.0 正式版发布,持续集成引擎
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/5447404.html
Copyright © 2011-2022 走看看