需求
uniapp开发的微信小程序在一些编辑页面,用户点击返回时,需要提醒用户是否确认返回,防止误触导致编写数据丢失,如下图:
实现
<page-container
:show="show"
:duration="false"
:overlay="false"
@beforeleave="beforeleave"
@afterleave="afterleave"
>
</page-container>
const show = ref(true);
function beforeleave() {
console.log("点击返回了");
if (show.value) {
//弹框提示 请自定义
modal.value.open({
title: "提示",
content: "本次操作还未保存,是否确定返回",
confirm() {
console.log("confirm");
isBackConfirm = false;
uni.navigateBack({});
},
cancel() {
show.value = false;
setTimeout(() => {
show.value = true;
}, 100);
},
});
return true;
}
uni.navigateBack({
delta: 1,
});
}
}
function afterleave() {
return;
}
问题
用户强制两次返回过快不能拦截,正常使用还是挺不错的