页面左右滑时，如何防止页面上下滑动

最近，做了一个项目，需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单，如下图：

简单实现了功能后，发现手机端运行时会遇到一个问题，当我手指进行左右滑动菜单时，除非手指水平滑动，否则会造成屏幕上下滑动。仔细研究后，发现是由于手指不能保证水平滑动，因此在滑动时，会有一定的误差，导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下：

1）在touchstart处，记录targetTouches.clientX，targetTouches.clientY，也就是手指开始时的坐标（x1，y1）

2）在touchmove处，同样记录targetTouches.clientX，targetTouches.clientY，也就是手指移动时的坐标（x2，y2）

3）通过start和move记录的坐标，计算手指移动的角度，可以通过计算cos，sin值来判断角度大小。

4）通过角度大小来控制父类的overflow-y的属性是否hidden。

这里举例说明下：

假设起始位置的坐标为（2，3），移动后的坐标为（1，1），如下图：

此时，通过简单计算可得出，x = 1，y = 2，z = √5

sin a = y/z = 2/ √5，

假设你定义手指滑动角度必须大于等于30°就判定为垂直上下滑动，小于30°则判断为非垂直上下滑动，

那么条件就是（sin 30° = 1/2）

if (sin a >= 1/2){

可以上下滑动

}else{

禁止上下滑动

}

另外，还有一点需要注意：由于手机端手指滑动的角度是从0°~360°，而sin曲线在0°~180°为正值，180°~360°为负值，因此在计算的时候，需要为x，y取绝对值，即x = |x1 - x2| ，y = |y1 - y2|

最后附上自己简单写的一个左右拉动代码，欢迎查看：

https://github.com/chaoyidaozhan/swipeLeft

页面左右滑时，如何防止页面上下滑动相关推荐

使用jQuery的blockUI来实现页面回传数据时的等待页面
每当点击提交按钮式,我们总是希望让用户看到的是比较友好的界面,很多网站都是使用jQuery的blockUI插件来实现这个功能,先看看界面吧: 下面我就一步一步告诉大家如何来实现这个功能,以后你就可以在 ...
【微信小程序】在页面跳转时如何进行页面导航
1. 什么是页面导航页面导航指的是页面之间的相互跳转.例如,浏览器中实现页面导航的方式有如下两种: ① a链接 ② location.href 2. 小程序中实现页面导航的两种方式 ① 声明式导航 ...
jsp页面div上下滑动_H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 实现原理假 ...
html5页面的手势,HTML5单页面手势滑屏切换如何实现
这次给大家带来HTML5单页面手势滑屏切换如何实现,怎么实现HTML5单页面手势滑屏切换?HTML5单页面手势滑屏切换的注意事项有哪些,下面就是实战案例,一起来看一下. H5单页面手势滑屏切换是采用H ...
iphonex 在pop页面显示tabBar时图片上移
我在做iPhone X适配时发现,当二级页面没有tabBar而一级页面有tabBar时,右滑返回时会出现tabBar文字图片上移的情况,找了很多原因,最后用一句代码实现
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
html单页面原理,HTML5单页面手势滑屏切换原理分析
H5现在可谓也是编程世界的主流,H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,下面通过本文简单说一下其实现原理和 ...
html离开页面时,js实现用户离开页面前提示是否离开此页面的方法（包括浏
本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) 如果在退出页面时需要弹出 ...
【Echarts】当页面宽度改变时如何使图表宽度自适应
问题: 当对echats不作任何处理时,图表宽度不会自适应,如图所示(变绿的区域为echarts选中的div). 加载完后: 收缩浏览器页面之后: 解决方法: 编写js函数,当页面大小变化时重新加载图 ...

页面左右滑时，如何防止页面上下滑动

页面左右滑时，如何防止页面上下滑动相关推荐

最新文章

热门文章