uni-app禁用返回按钮/返回键

前言

使用uni-app开发原生应用时,遇到需求:

  1. 需要禁用物理返回按钮、手势返回。
  2. uni.navigateBack仍可使用。

实现

  1. 当前页面的onBackPress()中,禁用物理返回
  2. pages.json中,去除当前页面的返回按钮
  3. 当前页面的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';
},

以上就是禁用物理返回按钮、手势返回的相关实现逻辑。

  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值