专线网站建设,购物盒子WordPress支付插件,做网站1000以下哪家好,网站集约化建设背景背景#xff1a;
使用uniapp 开发安卓app#xff0c;在用户编辑后直接返回时#xff0c;使用弹窗提醒用户#xff1a;还没有保存#xff0c;是否保存#xff1f;
方案
1. 使用自定义返回事件
//返回
back() {
// 业务逻辑#xff0c;弹窗提醒
uni.showModal({title:…背景
使用uniapp 开发安卓app在用户编辑后直接返回时使用弹窗提醒用户还没有保存是否保存
方案
1. 使用自定义返回事件
//返回
back() {
// 业务逻辑弹窗提醒
uni.showModal({title: 内容尚未保存是否保存,success: function (res) {if (res.confirm) {saveFun()} else if (res.cancel) {console.log(用户点击取消);// 然后返回uni.navigateBack()}}
})},结果点击自定义的按钮没有问题但是使用原生按钮返回或者是侧滑返回依旧不执行自定义逻辑
2. 使用onBackPress生命周期函数
onBackPress((option) {if(option.from backbutton){uni.showModal({title: 内容尚未保存是否保存,success: function (res) {if (res.confirm) {saveFun()} else if (res.cancel) {console.log(用户点击取消);// 然后返回uni.navigateBack()}}})}return true;
})结果虽然会提醒但是无法阻止返回事件在用户还没有点击保存的时候它就已经返回到上一个页面了这个也不行
3. 我测试成功的方案使用uni拦截器
添加拦截器
onShow(() {const {diaryContext,setDiaryContext} useEditStore();setDiaryContext(diaryRef.value)uni.addInterceptor(navigateBack, {invoke(args) {// 判断是不是返回按钮触发的返回事件if(args?.from backbutton){// 必须使用状态管理获取组件实例拦截器中不能直接拿到组件的实例backFun(diaryContext);return false; // 阻止返回}else{return true; // 允许返回}}})
})卸载拦截器,拦截器需要记得卸载
onHide(() {uni.removeInterceptor(navigateBack)
})结果使用拦截器就可以将原生返回事件进行自定义修改包括静止原生返回事件 ps 仅仅在安卓app 中测试有效其他的没有测试
