在iOS和安卓设备上实现页面滑动切换tab栏功能时遇到兼容性问题。在iOS上正常工作，但在部分安卓内置浏览器中，只有当左右滑动伴随轻微上下滚动时才能切换tab。通过分析touchstart、touchmove和touchend事件发现，水平滑动时touchend事件未触发，导致切换失效。尝试了阻止touchmove默认行为和同时绑定touchend和touchcancel事件，最终后者成功解决了问题，实现了在安卓上平滑切换tab栏的功能。
在做项目中遇到一个需求，需要实现可以上下滑动页面且左右滑动时切换tab栏
在ios上测试时可以实现功能，但在安卓机的自带浏览器测试时发现左右滑动不是每次都可以实现切换tab栏功能，排查问题后发现当左右滑动且屏幕同时上下滚动（简单来说就是左右滑动略有倾斜）时可以切换tab栏，而水平滑动时无法切换。
于是我在touchstart、touchmove、touchend事件中打印日志，发现水平左右滑动时根本没有触发touchend事件，因此写在touchend中的切换tab栏功能没有执行。
在搜索解决方法中尝试了：
1.在touchmove事件中执行prevent方法禁止默认事件，此时touchend事件被触发可以左右滑动切换tab栏，但突然发现上下不能滑动了。原因在于prevent禁用了touchmove的默认事件，而touchmove的默认事件就是上下滚动屏幕
2.同时绑定touchend和touchcancel事件，触发时执行同一部分代码（原本touchend触发所执行的代码），woc！！！解决！！！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
