uni-app 在非tabbar页面显示出了tabbar
uni-app 在非tabbar页面显示出了tabbar
示例代码：
// tabbar页
<template>
<view class="container">
<text class="title" @tap="onDetail">tabbar</text>
</view>
</template>
<script>
export default {
methods: {
onDetail() {
uni.navigateTo({
url: '/pages/demo/detail'
})
}
}
}
</script>
// detail.nvue
<template>
<view class="container">
<text class="title">详情</text>
</view>
</template>
<script>
export default {
onLoad() {
uni.reLaunch({
url: '/pages/demo/login'
})
}
}
</script>
操作步骤：
在tabbar页面写跳转到非tabbar页面,非tabbar页面onLoad时reLaunch到另一个非tabbar页面
预期结果：
不展示tabbar,展示正常
实际结果：
展示了tabbar,页面栈混乱
bug描述：
在tabbar页面跳转到非tabbar页面,非tabbar页面在onLoad的时候reLaunch跳转到另一个非tabbar页面,tabbar会显示在页面上,但是点击无效,然后跳转会tabbar页面栈会乱掉。
附件：
更多关于uni-app 在非tabbar页面显示出了tabbar的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在首页显示之前，不能跳转页面，否则会出现未定义的行为 你可以延迟下跳转登录页面的行为解决问题 问题还在优化中
更多关于uni-app 在非tabbar页面显示出了tabbar的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中，如果非 tabbar 页面显示出了 tabbar，通常是因为在 pages.json 中配置了 tabBar，并且当前页面的路径被错误地包含在 tabBar 的 list 中。以下是可能的原因和解决方法：
1. 检查 pages.json 配置
确保非 tabbar 页面的路径没有出现在 tabBar 的 list 中。tabBar 的 list 应该只包含那些需要显示 tabbar 的页面。
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
}
]
}
}
在上面的例子中，pages/detail/detail 是一个非 tabbar 页面，因此它不应该出现在 tabBar 的 list 中。
2. 确保页面跳转正确
在跳转到非 tabbar 页面时，确保使用的是 uni.navigateTo 而不是 uni.switchTab。uni.switchTab 用于跳转到 tabbar 页面，而 uni.navigateTo 用于跳转到普通页面。
// 错误的方式，会导致非 tabbar 页面显示 tabbar
uni.switchTab({
url: '/pages/detail/detail'
});
// 正确的方式
uni.navigateTo({
url: '/pages/detail/detail'
});
3. 检查页面路径
确保页面路径的拼写和大小写与 pages.json 中的配置完全一致。路径错误也可能导致 tabbar 显示异常。
4. 清除缓存
有时候，修改了 pages.json 后，可能需要清除缓存或重新编译项目才能看到效果。
5. 检查自定义 tabbar
如果你使用了自定义 tabbar，确保在非 tabbar 页面中正确地隐藏了 tabbar。可以通过在页面的 onShow 或 onLoad 生命周期中动态控制 tabbar 的显示与隐藏。
onShow() {
uni.hideTabBar();
}