|
在开发uniapp时有一个需求是添加数据时如果点了返回需要提示用户数据不会保存。
通过uniapp的生命周期处理：
官网地址：uniapp.dcloud.io/tutorial/pa…
监听onBackPress生命周期：
onBackPress(e) {
//backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
if(e.from === 'backbutton') {
this.cancel()
return true // 阻止返回
}
console.log(e);
},
处理返回时的业务方法：
cancel() {
// 这部分是判断页面是否填写了内容可忽略
if(!this.fileName) {
this.back()
} else {
uni.showModal({
title: '提示',
content: '返回将不会保存文件！',
success: async suc => {
if (suc.confirm) {
const res = await this.$u.api.delCpRecord(this.delId);
this.back()
} else if (suc.cancel) {
return true
}
}
});
}
},
//返回
back() {
uni.navigateBack({
delta: 1
})
},
这个方法有两个坑需要注意：
第一个坑是监听不了ios的左滑返回，目前的采用的解决方案是禁用左滑：
按官方的文档是在pages.json中配置popGesture属性
官网地址：uniapp.dcloud.io/collocation…
但是这样配置了后发现没有生效，需要在onLoad中添加如下代码：
onLoad(option) {
// 单页禁止测滑返回
// #ifdef APP-PLUS
let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.setStyle({ popGesture: 'none' })
// #endif
}
这样ios的左滑返回就被禁用了。
第二个需要注意是华为的左右滑动返回手势是会触发onBackPress事件的，并且返回的from值是backbutton，所以禁用侧滑没用，不过可以触发事件也就不需要禁用了。
|