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

实现代码如下:

//在页面中加入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);
      }
},

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐