700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题

移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题

时间:2019-09-26 11:23:55

相关推荐

移动端上下拖动调整顺序效果_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上结束,判定为右滑。左滑则相反。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。