uni自定义onBackPress事件
2020-06-22 本文已影响0人
扶不起的蝌蚪
onBackPress
函数return
非true
以外的值都会执行默认的返回行为,只有return true
才不会执行返回事件,所以在执行自定义事件时一定要返回true
data() {
return {
isConfirm:false, //处理返回逻辑
};
},
methods:{
onBackPress() {
if(this.isConfirm == false)
{
uni.showModal({
content: '数据尚未保存,你确定要返回吗?',
success: res => { // 一定要保证this的指向问题,否则会导致无限的弹出modal,可以考虑用that保存this指针或是使用箭头函数
if (res.confirm)
{
this.isConfirm = true
uni.navigateBack() //navigateBack会再次执行onBackPress事件,所以在进入函数的时候我们加了isConfirm来判断是否执行自定义的事件
}
}
})
return true
}
else
return false
}
}
值得一提的是这个函数不能使用async await,否则会导致弹出moadl后就没有后面的返回动作
//错误示例
data() {
return {
isConfirm:false, //处理返回逻辑
};
},
methods:{
async onBackPress() {
if(this.isConfirm == false)
{
let [,res] = await uni.showModal({ content: '数据尚未保存,你确定要返回吗?})
if (res.confirm)
{
this.isConfirm = true
uni.navigateBack()
return true
}
else
return false
}
}