微信小程序阻止返回事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序阻止返回事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求场景

当在一个表单页面填写了很多数据,或者编辑页面数据发生变动之后,这时候返回上一个页面需要提醒用户是否返回的弹框文章来源地址https://www.toymoban.com/news/detail-767412.html

实现方法一(ios会存在一定的问题)

在onLoad生命周期里注册

   wx.enableAlertBeforeUnload({
            message: "您内容已更新,还没保存,确定要退出吗?",
            success: function (res) {
            },
            fail: function (err) {
                console.log("失败：", err);
            },
        });

当你修改数据之后又把数据还原此时数据是没有发生改变的这时候返回上一个页面是不需要阻止用户出现确定弹框的,在你修改数据的判断是否与老数据一致的逻辑中添加如下代码注销刚才在onload 生命周期里面的弹框事件,此时返回上一个页面是不会阻止用户

wx.disableAlertBeforeUnload()

方法二

1.在编辑页面添加如下代码

		<view class="" v-if="showPage">
			<page-container :show="showPage " :overlay="false" @beforeleave="beforeleave">
			</page-container>
		</view>

1. 在data里面定义showPage 默认为false
1. 在你判断数据是否发生改变的逻辑中如果需要提醒用户 this.showPage = true
1. beforeleave回调写在methods里

		beforeleave() {
				this.showPage = false
				uni.showModal({
					title: 内容发生改变,确定要退出吗?,
					success: (e) => {
						if (e.confirm) {
							uni.navigateBack(1)
						} else {
							//点击取消之后再次开启弹框阻止用户
							this.showPage = true
						}
					},
				})
			},

到了这里，关于微信小程序阻止返回事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！