如图所示,要求点击左上角返回键,先显示弹框,操作后才有退出效果。
注:此时的返回键,不是我写的元素,而是 uniapp 的默认返回键。
方法一:(亲自用安卓手机 OPPO Find X 测试,可用,同时物理返回键也可触发该效果;IOS系统暂未测试)
onBackPress(e) {
console.log(e);
if (e.from == 'backbutton') {
uni.showModal({
title: '提示',
content: '是否保存?',
success: function (res) {
if (res.confirm) {
uni.showToast({
title: '用户点击确定',
duration: 1000
})
} else if (res.cancel) {
uni.showToast({
title: '用户点击取消',
duration: 1000
})
}
uni.navigateBack({
delta: 1
});
}
});
return true; //阻止默认返回行为
}
},
方法二:见此博主
onBackPress(e) {
console.log(e);
if(e.from == 'backbutton'){
this.$utils.showModal('提示','房型尚未保存,确认退出吗?',true,'继续编辑','确定').then(()=>{
console.log('确定')
uni.navigateBack({
delta:1
})
}).catch(()=>{
console.log('继续编辑')
})
return true;//阻止默认返回行为
}
}
方法三:
onBackPress(options) {
if (options.from === 'backbutton') {
if (this.editShow.edit) {
uni.showModal({
title: '提示',
content: '回执信息未保存,是否离开',
success: res => {
if (res.confirm) {
uni.navigateBack();
}
}
});
// 禁止默认返回
return true;
}
}
},