微信小程序解决多级页面返回及实现返回时弹出层提示-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序解决多级页面返回及实现返回时弹出层提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决微信小程序中点击页面返回按钮时需要返回多级的问题

最初使用的方法是在页面的onUnload中再写一个wx.navigateBack()方法，基本上也能实现效果，但不太完美，会出现一些情况：

如果当前页面中有按钮需点击后跳转到其他页面时，页面会出现先返回上一页再跳转到目标页面的效果，需要针对这种情况单独做判断
经测试发现，安卓中可以解决问题，但ios中会出现一级一级跳转的效果，先看到前一个页面再跳转到最终返回的页面

onUnload() {
	wx.navigateBack({
		delta: 2
	})
}

在微信基础库2.16.0以后开始支持page-container组件，通过这个组件可以对右滑手势返回、安卓物理返回键和navigateBack返回三种操作进行控制
使用下列代码可以实现点击页面返回、右滑手势返回、安卓物理键返回直接返回两级，首次点击返回动作关闭的是page-container组件

<page-container
:show="show"
:overlay="false"
@beforeleave="backTip"></page-container>

export default {
	data() {
		return {
			show: true
		}
	}
}
methods: {
	backTip() {
		// 一定要加这个否则可能会出现再次进入该页面无法正常返回的情况
		this.show = false
		uni.navigateBack({
			delta: 2   // 返回层级可自由设定
		})
	}
}

也可通过该方法实现返回前页面提示效果文章来源地址https://www.toymoban.com/news/detail-794164.html

<page-container
	v-if="showPage"  
	:show="show"
	:overlay="false"
	@beforeleave="backTip"></page-container>
// 这里多加一个变量showPage来判断要不要显示page-container是因为直接修改show为true/false也会触发组件的beforeleave事件
backTip() {
	// 判断页面内容是否已经保存，保存了就直接返回，未保存就弹出提示
	this.show = false
	if(this.clickedSave) {
		uni.navigateBack()
	} else {
		// 页面操作未保存提示
		uni.showModal({
			title: '',
			content: '当前页面尚未保存，是否保存离开',
			confirmText: '保存',
			confirmColor: '#01CB62',
			success: (res) => {
				if (res.confirm) {
					this.handleSave()
				} else if (res.cancel) {
					uni.navigateBack()
				}
			}
		})
	}
}