当前位置:编程学习 > uniapp >>

uniapp阻止页面返回(微信小程序专属page-container在页面返回前做某些操作)

注意:page-container 微信小程序专属的页面返回拦截 提示,并且需要真机体验!
部分机型拦截不到 其他小程序 H5 APP 都没效,我就是没看清楚,浪费很多时间


需求:在当前页面做盘点工作,未保存当前页面数据时退出该页面,需要弹窗提示用户使用保存后再关闭页面


该代码可拦截:点击导航栏返回、滑动返回、安卓物理返回键和调用 navigateBack 接口

官方文档:page-container | 微信开放文档

https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html


代码:写在你需要返回监听的同一个页面就行了

 注意:page-container组件直接使用 不用引入(是微信官方的页面容器)

<view v-if="isShow">
<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
</view>
AI助手
data() {
return {
isShow: true,
};
},
AI助手
直接调用 beforeleave方法进行操作(监听页面返回)

beforeleave() {
this.isShow = false; //这个很重要,一定要先把弹框删除掉
uni.showModal({
confirmColor:'#bd3124',
title: "易做图提示您,是否保存后再离开本页?",
success: (e) => {
if (e.confirm) {
console.log('确认');
// 返回上一页
uni.navigateBack({
delta: 1
})
} else {
uni.navigateBack({
delta: 1
})
}
}
})
},
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,