文章目录
- 1. 重写 uni.navigateBack 方法
- 2. 改进方案:确保只在当前页面拦截返回操作
在 UniApp 开发中,有时我们需要在满足特定条件时,禁止用户执行返回上一页面的操作。常见的需求是,当用户在某个页面进行某些操作时(例如未保存的数据),我们需要确认用户是否真的希望离开当前页面。
本文介绍了如何通过重写 uni.navigateBack
方法,拦截返回操作,并在满足特定条件时弹出确认框,确保用户的操作是有意的。此外,还提供了改进方案,确保在页面跳转时不会影响其他页面的返回操作,只有在当前页面才会触发返回拦截。
1. 重写 uni.navigateBack 方法
在 UniApp 中,uni.navigateBack()
是用来返回上一页面的 API。为了在用户执行返回操作时加入自定义逻辑(如弹出确认框),我们可以重写 uni.navigateBack()
方法。
初步实现:
javascript"><template>
</template><script>export default {data() {return {originalBack: null,}},onLoad() {// 保存原始的 navigateBack 方法this.originalBack = uni.navigateBack;let that = this;// 重新定义 navigateBack 方法uni.navigateBack = function() {// 可以根据条件判断是否要阻止返回uni.showModal({title: '提示',content: '确定要离开此页面吗?',success(res) {if (res.confirm) {if (true) {// 满足某一条件时执行返回操作// 用户确认离开,执行原始的返回操作that.originalBack.call(this);} else {//不满足条件时的动作}} else {// 用户取消离开,什么都不做,阻止返回}}});};},onUnload() {// 页面卸载时,恢复原来的返回功能uni.navigateBack = this.originalBack;}}
</script><style>
</style>
在上述代码中,我们通过重写 uni.navigateBack
方法,实现了对用户返回操作的拦截。当用户尝试返回上一页时,首先弹出一个确认框,只有在用户确认后才会执行返回操作。如果用户取消,则返回操作会被阻止。
效果展示:
2. 改进方案:确保只在当前页面拦截返回操作
上述方法能够实现基本的返回拦截功能,但在打开新页面时,当前页面并未销毁,因此当用户从新页面返回时,拦截仍然会触发,这不是我们想要的效果。
为了解决这一问题,我们需要确保 只有在当前页面 执行返回操作时才会触发拦截。为了实现这一目标,我们可以使用 uni.getCurrentPages()
来判断是否是当前页面,并在页面卸载时恢复 uni.navigateBack
的原始方法。
改进后的代码:
javascript"><template>
</template><script>export default {data() {return {// 用于存储原始的 navigateBack 方法originalBack: null,}},onLoad() {// 监听返回操作this.listenNavigateBack();},onUnload() {// 页面卸载时,恢复原来的返回功能uni.navigateBack = this.originalBack;},methods: {// 监听返回操作listenNavigateBack() {// 获取当前页面的路径const currentPage = getCurrentPages().pop(); // 获取当前页面的实例// 保存原始的 navigateBack 方法this.originalBack = uni.navigateBack;let that = this;// 重新定义 navigateBack 方法uni.navigateBack = function() {// 仅在当前页面时触发返回拦截if (getCurrentPages().pop() === currentPage) {// 可以根据条件判断是否要阻止返回uni.showModal({title: '提示',content: '确定要离开此页面吗?',success(res) {if (res.confirm) {if (true) { // 满足某一条件时执行返回操作// 用户确认离开,执行原始的返回操作that.originalBack.call(this);} else {//不满足条件时的动作}} else {// 用户取消离开,什么都不做,阻止返回}}});} else {// 在其他页面时,不做拦截,直接返回that.originalBack.call(this);}};},}}
</script><style>
</style>
说明:
-
getCurrentPages(): getCurrentPages()
返回当前页面栈,pop()
会返回栈中的最后一个页面(即当前页面)。通过比较当前页面是否是触发返回操作的页面,来决定是否弹出确认框。 -
拦截返回操作: 只有当返回操作是在当前页面时才弹出确认框,其他页面返回操作不受影响。
-
恢复原有的
navigateBack
方法: 页面卸载时,在onUnload()
中恢复uni.navigateBack
的原始行为,避免影响到其他页面。