【uni-app】H5的返回拦截经验分享
uni-app的onBackPress只能拦截左上角的返回,物理按键和左滑返回拦截不了,需要另外的解决方案。
·
项目需求,要在用户试图关闭或者返回的时候拦截,并弹出提示框。
uni-app的onBackPress只能拦截左上角的返回,物理按键和左滑返回拦截不了,需要另外的解决方案。
研究了一下,采用popState,大致实现了功能。
在想要拦截返回的页面的mounted新增代码
methods:{
onBack(){
//检测到返回再插一条
window.history.pushState(null, null, document.URL);
//在这里弹个弹框什么的
uni.showModal(...)
}
},
mounted(){
//页面加载后先插一条记录
window.history.pushState(null, null, document.URL);
window.addEventListener("popstate", this.onBack(), false);
}
在destroyed销毁监听事件,不然会影响其他页面
destroyed() {
window.removeEventListener("popstate", this.onBack, false);
},
保险起见,在跳转到其他页面的时候,也销毁监听
methods:{
toIndex(){
window.removeEventListener("popstate", this.onBack, false);
uni.navigateTo({
url:'/pages/index/index'
})
}
}
注意事项:
1.其他页面的返回事件,要改为 history.back() ,不能是 uni.navigateBack()。
2.有个插件 vue-prevent-browser-back 也是用类似方案,不过不能实现自定义监听。
3.部分浏览器,如果用户进入页面啥也不干就返回,是监听不到的,最好是弹一个框,让用户关闭从而产生交互。这个暂时找不到更好的办法。
经过测试归纳如下:
safari浏览器、firefox浏览器、uni-app ios的webview、企业微信浏览器、opera浏览器、miui浏览器。页面一打开就能监听到popstate。
微信浏览器、chrome浏览器、uni-app android的webview、uc浏览器、搜狗浏览器等大多数chroumin内核浏览器,需要页面交互才能监听popstate
(可能存在版本高低的差异,不一定准确)
更多推荐
已为社区贡献2条内容
所有评论(0)