uni.addInterceptor('switchTab', {
// tabbar页面跳转前进行拦截
invoke(e) {
return false
},
success(e) {
// console.log(e)
}
})
3***@qq.com
- 发布：2022-06-22 11:20
- 更新：2024-04-03 15:19
- 阅读：1412
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows10企业版
HBuilderX类型： 正式
HBuilderX版本号： 3.4.15
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： 华为p30
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
uni.addInterceptor('switchTab', {
// tabbar页面跳转前进行拦截
invoke(e) {
return false
},
success(e) {
// console.log(e)
}
})
uni.addInterceptor('switchTab', {
// tabbar页面跳转前进行拦截
invoke(e) {
return false
},
success(e) {
// console.log(e)
}
})预期结果：
tabbar底部的选中应该也要拦截住
tabbar底部的选中应该也要拦截住
实际结果：
tabbar底部的选中应该也要拦截住
tabbar底部的选中应该也要拦截住
bug描述：
在首页的onshow中使用下面代码，tabbar有两个：首页和个人 ，然后在首页做拦截。
结果：当我点击个人页的时候，页面没有切换到个人页，拦截是非常的成功。但是下面tabbar选中的状态却选中的是个人页
按理来说，选中的状态不是应该也拦截了吗，既然拦截了，那么选中的是首页而非个人页
解决了，使用我这个方法可以兼容：
uni.addInterceptor('navigateBack', {
invoke: (e) => {
// 1 获取页面栈
const pages = getCurrentPages()
const len = pages?.length
// 2 判断长度
if (len !== 2) return true
// 3 判断最后一个页面是否为引导页
if (pages[1].$page.fullPath != "/pages/opening-prompt/opening-prompt") return true
// 4 兼容跳转至上个 tab 页面，APP端需要兼容 tabbar 的活跃图标异常
const routeName = getRoute(pages[0].$page.fullPath)
// 5 判断是否为 tabbar 页面
if (!$Router.tabBars.includes(routeName)) return true
// 6 跳转回原 tab 页
$Router.to(routeName)
return true
}
})判断进入的引导页，在拿到上一次跳转的路由，再通过判断路由是否是 tab 页面路由，使用 switchTab 去执行一次跳转，就可以将图标切换正常了
3***@qq.com (作者)
没有解决，这是api层面的，解决不了，除非不用
2022-12-17 11:32