uni-app禁用返回按钮/返回键的具体实现
作者：也•简
前言
使用uni-app开发原生应用时，遇到需求：
- 需要禁用物理返回按钮、手势返回。
- uni.navigateBack仍可使用。
实现
- 当前页面的onBackPress()中，禁用物理返回
- pages.json中，去除当前页面的返回按钮
- 当前页面的mounted()中，隐藏当前页面的返回按钮（针对pages.json中设置无效的情况）
具体演示代码
1、当前页面中，在onBackPress()控制是否禁用返回按钮、手势返回。
onBackPress(options) {
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
if (options.from == 'backbutton') {
return true;
} else if (options.from == 'navigateBack') {
return false;
}
},onBackPress()中的options.from的值有两个：backbutton 和 navigateBack。
- backbutton：表示来源是左上角原生返回按钮、 Android 返回键或Android手势返回。
- navigateBack：表示来源是顶部导航栏自定义返回按钮。使用的是uni-app中的返回api：uni.navigateBack(OBJECT)，
2、pages.json中，去除当前页面的返回按钮，主要是设置：titleNView
{
"path": "pages/update/update",
"style": {
"navigationStyle": "custom", // 取消本页面的导航栏
"app-plus": {
"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
"background": "transparent", // 背景透明
"backgroundColor": "rgba(0,0,0,0)", // 背景透明
"popGesture": "none" ,// 关闭IOS屏幕左边滑动关闭当前页面的功能
"titleNView": { // 隐藏当前页面的返回按钮
"titleSize": "18px",
"autoBackButton": false // 禁用原生导航栏
}
}
}
}3、当前页面中，在mounted()中，隐藏当前页面的返回按钮（非必须）
mounted(){
//pages.json中设置autoBackButton：false 无效的，可以在需要去除导航返回的页面中的mounted钩子里加上如下代码段
var backbutton = document.getElementsByClassName('uni-page-head-hd')[0]
if(backbutton) backbutton.style.display = 'none';
},以上就是禁用物理返回按钮、手势返回的相关实现逻辑。
附：uni-app H5的返回拦截经验分享
项目需求，要在用户试图关闭或者返回的时候拦截，并弹出提示框。
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
(可能存在版本高低的差异，不一定准确)
总结
到此这篇关于uni-app禁用返回按钮/返回键的文章就介绍到这了,更多相关uni-app禁用返回按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！