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

转载于:https://www.cnblogs.com/pingfan1990/p/5447404.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值