uniapp onBackPress事件监听返回键

uniapp onBackPress事件监听返回键

我们知道使用uniapp写页面时有多种返回方法：

1.点击某个标签的返回事件返回页面（uni.navigateBack()）
2.点击顶部导航栏的返回键
3.使用手机自带的物理返回键

在特定的页面我们需要把这几个返回键配置好
为什么呢？？

看下面的案例

当我们点击某个页面弹出遮罩层，按照常理说我们使用物理返回键的操作是隐藏遮罩层，再次点击物理返回键才是回到上一页，但是这个时候点击物理返回键直接执行回上一页，我们就需要对返回键进行限制，所以就有上面说的onBackPress(event)

onBackPress(event)是啥

onBackPress(event) 生命周期函数 监听返回事件
既然是生命周期函数
那么就应该和onLoad、onShow等生命周期函数写在同级

那么我们怎么使用onBackPress(event)呢？？

我们先看onBackPress(event) 的event都返回什么东西把
event会返回一个from属性
from有两种值

1.from = navigateBack （使用uni.navigateBack这个函数时）
2.from = backbutton （使用顶部导航栏的返回键、使用物理返回键）

假如我们点击一个带有返回事件的标签,就会返回

我们就可以根据from返回的值判断是哪种返回

我们写一个简单的案例直接上代码 （关于遮罩层的）

onBackPress(e) {
	//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
      if (e.from === 'backbutton') {
        if (遮罩层是否隐藏) {
          //如果没隐藏
          //这里写让遮罩层隐藏的代码
        } else {
          //如果隐藏了
          //这里就写返回上一页
           uni.navigateBack()
        }
        //return true 
        //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
 		//如果要限制必须写成true
        return true;
      }
    },

这样我们点击物理返回键 就先判断遮罩层是否隐藏，如果隐藏就直接返回上一页，否则点击返回就会把遮罩层隐藏，再次点击才会返回上一页。

原文地址：https://blog.csdn.net/weixin_47284756/article/details/114476607