uniapp小程序tabbar跳转拦截与弹窗控制

一、第一步

1、App.vue中定义globalData用于全局存储状态

globalData:{needShowReleaseConfirm: false, // 标记是否需要显示发布页面确认弹窗allowReleaseJump: false ,// 标记是否允许跳转到发布页面},

2、在App.vue中的onLaunch写入监听事件

	onLaunch: function() {// 添加switchTab拦截器const app = this;uni.addInterceptor('switchTab', {invoke: (args) => {console.log('switchTab拦截器触发', args);// 获取当前页面路径const pages = getCurrentPages();if (pages.length > 0) {const currentPage = pages[pages.length - 1];const currentRoute = currentPage.route;// 判断是否跳转到release页面（从任何tabbar页面）if (args.url === '/pages/release/release') {// 如果已经允许跳转，则清除标记并正常跳转if (app.globalData.allowReleaseJump) {console.log('用户已确认，允许跳转到release页面');app.globalData.allowReleaseJump = false;app.globalData.needShowReleaseConfirm = false;return true;}console.log('检测到跳转到release，需要显示确认弹窗');// 设置全局标记，需要显示确认弹窗app.globalData.needShowReleaseConfirm = true;// 触发当前页面显示弹窗uni.$emit('showReleaseConfirm');// 阻止跳转return false;}}// 其他情况正常跳转app.globalData.needShowReleaseConfirm = false;app.globalData.allowReleaseJump = false;return true;}});},

二、第二步

我的需求是从任何tabbar页面跳转到release这个tabbar页面时都弹窗出来，点击选择后才会跳转，如图

这些弹窗需要写到跳转前的页面里，比如从index页面跳转到release页面前要弹窗，就把这个弹窗写到index页面。

1、拿index页面来实例,在index.vue页面的created中监听收到的状态，来决定是否显示弹窗。

created() {// 监听全局事件，当要跳转到发布页面时显示确认弹窗uni.$on('showReleaseConfirm', () => {console.log('收到显示发布确认弹窗事件');this.showReleaseModal = true;});},