admin管理员组文章数量:1561803
前天测试提了一个需求, 就是我们这个手机端项目在手机浏览器中打开, 有默认的左滑返回上一页的功能, 就是点击按钮进到下一个页面后 , 在屏幕上左滑会返回上一个页面 , 测试说希望把这个默认的功能去掉 , 让用户通过页面的返回按钮返回 , 赶紧各种百度, 终于找到一篇对症下药的文章 , 一下就解决了这个问题, 让我再次感受到面向百度开发的强大 , 感谢百度, 现在把这个方法分享给大家,其实特别简单
一 , 直接在index.html中添加如下代码, 写在style标签和script标签中
<style>
html {
touch-action: none;
touch-action: pan-y;
}
</style>
<script>
document.addEventListener("touchmove", function (e) {
e.preventDefalut()
}, {
passive: false
});
var startX, startY;
document.addEventListener("touchstart", function (e) {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove", function (e) {
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
e.preventDefault();
}
}, {
passive: false
});
</script>
二 , 其实没有第二步 , 第一步搞完测一下应该就没问题了 , 但我发现我一个二级页面点进来后左滑还是会返回上一页 , 所以我在这个二级页面又添加了上面的代码, 就解决了 ,如果你们没有这个问题 , 就不用管了
版权声明:本文标题:vue手机端项目中怎么禁止手机浏览器默认的左滑返回上一页 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727472857a1116267.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论