uni-app禁用返回按钮/返回键-Toy模板网

这篇具有很好参考价值的文章主要介绍了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';
},

以上就是禁用物理返回按钮、手势返回的相关实现逻辑。文章来源地址https://www.toymoban.com/news/detail-482791.html

到了这里，关于uni-app禁用返回按钮/返回键的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！