uniapp阻止页面返回(在页面返回前做某些操作)

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

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

效果图:

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

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

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

<view v-if="isShow">
			<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
		</view>
data() {
		return {
		isShow: true,		
	};
},

直接调用 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
							})
						}
					}
				})
			},

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值