uni-app禁用返回按钮/返回键的具体实现

目录
  • 前言
  • 实现
  • 具体演示代码
  • 附：uni-app H5的返回拦截经验分享
  • 总结

前言

使用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禁用返回按钮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni-app路由配置文件pages.json平台化拆分

    目录 对uni-app路由配置文件pages.json进行平台化拆分 例子: 优化思路: 过程: 对uni-app路由配置文件pages.json进行平台化拆分 背景:公司打造小程序矩阵化,以uni-app作为技术栈生成不同平台的小程序代码.小程序项目包含5个平台的代码,虽然是一份代码运行5个平台,但是各个平台又有差异,在代码里面需要做很多条件编译进行兼容处理.随着项目的壮大与页面的增多,控制路由的pages.json已经异常庞大且代码可读性差(想找一个页面需要找到上下文切换,浪费时间并且可能误

  • 使用uni-app打包H5的图文教程

    使用uni-app打包H5的图文教程

    1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 2. 修改完后,点击工具栏 --- 发行 --- 网站pc web或手机 h5 3. 弹出弹窗,修改网站标题与网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行. 4. 点击发行后如图 5. 发行成功后,找到 unpackage --- dist --- build --- h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip

  • uni-app弹出层uni-popup使用及修改默认样式的方法实例

    uni-popup官方文档 我这里的背景是弹出一个选择规格的菜单.使用vue3+ts,使用组合式api 首先看看在vue3+ts+setup下的使用: <template> <!-- 定义一个按钮,用于打开弹出层 --> <view style="width: 200px"> <button @click="openSpecs">弹出</button> </view> <!-- 弹出层视图

  • uni-app多环境部署解决方案详解

    uni-app多环境部署解决方案详解

    目录 前言 尝试几种方式 解决方案 部署方式 获取接口 部署路径 命令行 其他 总结 前言 最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈:选用了 uni-app 来开发.开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件:但实际到部署的时候,出现来问题:由于现在只考虑 H5 端,部署和测试会出现多环境配置,但是我使用的 HBuilderX 工具创建的工程,所以只存在开发环境:development 和生产环境:production. 尝

  • uni-app动态修改主题色的方法详解

    目录 前言 一.uni.scss 使用方式 二.暗黑主题 三.自定义主题配置 1.在根目录下新建 theme 文件夹 css-theme uni.scss中引入 css-variate cue-theme main.js 导入 system-theme 2.vuex 配置 index.js 全局导出 main.js中导入 3.页面中使用 四.黑夜 白天主题展示 总结 前言 老是碰到初版制作完成没多久,就整一出说什么要更改整个项目的色彩体系.真的是宝宝心里苦啊! 起初都是通过uni项目自带的uni

  • uni-app使用swiper实现轮播图的方法

    目录 uni-app轮播图实现之swiper 补充:uniapp swiper 自定义轮播图指示点 总结 uni-app轮播图实现之swiper 首先在data中定义一个图片数据的对象数组 data() { return { rotation: [ { id: 1, url: 'https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f0

  • JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法. 下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history. 大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安

  • ionic2如何处理android硬件返回按钮

    问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();). 2.要么请求用户确认(添加一个Confirmation Alerts). 3.按一下提示,按两下退出(加一个方法用toast提醒). 这里用第三种展示. 解决 在app.html中,添加#myNav,在app.c

  • IOS 改变导航栏返回按钮的标题实例详解

    IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

  • JavaScript 监控微信浏览器且自带返回按钮时间

    比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

  • 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法

    最近在使用微信.支付宝.百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息.当在错误页面的时候,点击返回或者Android物理按键上一步的时候,将关闭页面. 在微信.支付宝.百度钱包中,他们对页面关闭进行了封装,传统的window.close()是无效的,必须要使用它们的js代码才能关闭. 下面是三种移动app的关闭方式: WeixinJSBridge.call('closeWindow');//微信 AlipayJSBridge.call('closeWebview'

  • Android点击按钮返回顶部实现代码

    点击按钮返回顶部,直接上代码吧 布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent

  • 在Unity中捕捉Android的常用按钮返回事件

    在Unity开发中捕捉Android的常用事件其实很简单 Input.GetKey(KeyCode.Escape) Input.GetKeyDown(KeyCode.Home) // 返回键 if ( Application.platform == RuntimePlatform.Android &&(Input.GetKeyDown(KeyCode.Escape))) { //.... } // Home键 if ( Application.platform == RuntimePlat

  • Android实现定制返回按钮动画效果的方法

    Android实现定制返回按钮动画效果的方法

    今天我们来讲一讲Andorid中如何定制返回按钮的动画效果.我将结合实际应用来阐述如何使用. 首先来看一个效果截图,有一个搜索按钮在一个页面的顶部: 我之前实现的方式是和百度/Google首页搜索的效果一样的,类似web开发中的ajax请求,结果直接在当前页面显示出来(下拉效果).后来参考了众多APP之后发现都是进入到一个新的页面,所以我也就改过来试试..废话说多了.. 那我们点击了搜索框之后呢,会进入到一个新的activity,这里的动画效果很简单,直接使用overridePendingTra

  • Android 自定义返回按钮的实例详解

    Android 自定义返回按钮的实例详解 程序中我们有时候想让放回按钮按照自己的需求调整页面而不是单纯的按照系统返回上一级,这个问题很简单,重写 onKeyDown 方法即可. 下面方法,包含了 webview 中的返回上一页和普通 activity 的单击设置和双击退出程序. @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //如果我们用的是webview页面,想返回网页的上一页设置这里就可以了 if (key

  • iOS禁用右滑返回的两种方法

    本文实例为大家分享了iOS禁用右滑返回的具体代码,供大家参考,具体内容如下 方式一: 前提:如果使用的自定义UINavigationController基类,请不要在此基类里写相关的手势操作方法. 代码如下: -(void)viewDidAppear:(BOOL)animated{ if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.naviga

随机推荐