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是水平也是不行的,如果用户是斜上地滑怎么判断?
我的想法是,在这个轮播上实现这样的一个覆盖层
当用户从A触发了touchstart 结束或者move到b,或者b start,在c上结束,判定为右滑。左滑则相反。
简简单单,pfan!出来混的,一切都是要还的。