uniapp微信小程序实现拦截页面返回(手机左右滑动,手机返回键返回,页面方法返回)

在使用小程序做一些划开抽奖等页面时,因为手机自带的左右滑动、按键返回等影响导致开奖动图不能正常播放完就被强制返回到上一页。
或者页面在返回时需要弹出询问对话框等操作。

实现代码如下:

//在页面中加入page-container标签
// v-if="isShow" 必需有否则只会在第一次的时候有效,第二次就会直接返回不会再触发
<view v-if="isShow">
	<page-container :show="isShow" :overlay="false" @beforeleave="onBeforeLeave">
	</page-container>
</view>

//data参数中定义 `isShow` 字段
data() {
	return {
		isShow: true, //默认为true
}
}

//methods 中定义监听方法  两种情况下的代码
onBeforeLeave(res) {
	let that = this;
	this.isShow = false;
	
	//---------------不弹框只阻止页面返回代码,需要弹框这块不加----------------------
	//间隔10ms否则太快会有问题
	setTimeout(() => {  
			this.isShow = true
	}, 10)
	//---------------不弹框只阻止页面返回代码----------------------

	//弹框的话用下面的代码,也可以使用uni.showModal 或者其他弹框组件都行
	 wx.enableAlertBeforeUnload({
      message:"您确定要返回上一页吗?",
      success: function(res) {
        console.log("成功", res);
      },
      fail:function(errMsg) {
        console.log("失败", errMsg);
      }
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值