uni-app errMsg: "setTabBarItem:fail not TabBar page"

uni-app errMsg: “setTabBarItem:fail not TabBar page”

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.5.2 (20G95) HBuilderX

示例代码：

<template>  
    <view>  
        这是登录页  
        <button type="default" @click="toDoLogin">登录</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onsite: ''  
            }  
        },  
        onLoad(event) {  
            if (event.onsite) {  
                this.onsite = event.onsite  
            }  
        },  
        methods: {  
            toDoLogin() {  
                if (this.onsite === 'L') {  
                    uni.setTabBarItem({  
                      index: 0,  
                      text: '项目汇总',  
                      iconPath: 'static/logo.png',  
                      selectedIconPath: 'static/logo.png',  
                      pagePath: 'pages/home/home',  
                      success(info) {  
                          console.log("设置成功，返回信息：", info)  
                          uni.switchTab({  
                            url: '/pages/home/home'  
                          })  
                      },  
                      fail(err) {  
                        console.log("设置失败，错误信息：", err)  
                      }  
                    })  
                } else {  
                    uni.switchTab({  
                        url: '/pages/index/index'  
                    })  
                }  
            }  
        }  
    }  
</script>  

<style>  

</style>

操作步骤：

HbuilderX打开项目，运行到浏览器Chrome后，url中添加参数?onsite=L，点击登录，查看控制台信息

预期结果：

动态设置第一个tabBar的路径及名称后成功跳转新页面

实际结果：

不走成功，调用uni.setTabBarItem方法触发失败函数，错误信息：errMsg: “setTabBarItem:fail not TabBar page”

bug描述：

业务逻辑，根据不同用户类型动态设置tabBar第一个的路径及名称

实现步骤:

  1. 登录接口返回onsite
  2. onsite 为L时，动态设置第一个tabBar的路径及名称
  3. 动态设置成功后跳转对应新的首页

BUG:

调用uni.setTabBarItem失败，同时测试调用所有设置 tabBar的方法都是失败

调用失败信息:

errMsg: “setTabBarItem:fail not TabBar page”

test_set_tabbar.zip


更多关于uni-app errMsg: "setTabBarItem:fail not TabBar page"的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

已成功排坑，在 h5 端，使用 uni.setTabBarItem 方法必须在 tabbar 页面，否则就会报 errMsg: “setTabBarItem:fail not TabBar page” 的问题，但是该方法在 app 中，非 tabbar 页面也可以正常调用。其他端未尝试（官方文档中并未提到这一点。）

更多关于uni-app errMsg: "setTabBarItem:fail not TabBar page"的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我在app非tabbar页面调用也有这问题唉

大佬 你这个解决了吗

setTabBarItem方法 只能在tabbar页面调用

则么解决，在线等

已排查出问题：并不是uniapp的问题，而是微信小程序并不支持在非tabBar页面调用该方法 具体可参考 微信官方回答

楼主说的是 uni.setTabBarItem 方法，不是 setTabBarBadge 方法

现在有解决办法了嘛？

为什么到现在还是这个问题 就不能出一个兼容的办法嘛？

我在H5端也遇到了

这个错误是因为你在非 TabBar 页面调用了 uni.setTabBarItem 方法。从你的代码来看，登录页（login）本身不是 TabBar 页面，但你在其中尝试修改 TabBar 的配置。

问题分析：

  1. uni.setTabBarItem 方法只能在 TabBar 页面中调用
  2. 你的登录页没有在 pages.json 的 tabBar 配置中声明为 TabBar 页面
  3. 在 H5 环境下，TabBar 相关 API 有更严格的限制

解决方案：

将 TabBar 配置的逻辑移到 TabBar 页面中执行，比如在第一个 TabBar 页面的 onLoad 或 onShow 生命周期中：

// 在 home 页面（第一个 TabBar 页面）中
onLoad() {
    const onsite = uni.getStorageSync('onsite');
    if (onsite === 'L') {
        uni.setTabBarItem({
            index: 0,
            text: '项目汇总',
            iconPath: 'static/logo.png',
            selectedIconPath: 'static/logo.png'
        });
    }
}

修改你的登录逻辑：

toDoLogin() {
    if (this.onsite === 'L') {
        // 先存储 onsite 标识
        uni.setStorageSync('onsite', 'L');
        // 直接跳转到 TabBar 页面
        uni.switchTab({
            url: '/pages/home/home'
        });
    } else {
        uni.switchTab({
            url: '/pages/index/index'
        });
    }
}
回到顶部