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;
}
},
这样我们点击物理返回键 就先判断遮罩层是否隐藏,如果隐藏就直接返回上一页,否则点击返回就会把遮罩层隐藏,再次点击才会返回上一页。
标签:返回,uniapp,遮罩,event,点击,onBackPress,监听,隐藏 来源: https://blog.csdn.net/weixin_47284756/article/details/114476607