uni-app 小程序端 uni.setTabBarItem 无效，在app端正常

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app 小程序端 uni.setTabBarItem 无效，在app端正常

产品分类

uniapp/小程序/微信

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11
HBuilderX类型 Alpha
HBuilderX版本号 4.33
第三方开发者工具版本号 4.33
基础库版本号 vue2
项目创建方式 HBuilderX

示例代码

uni.setTabBarItem({  
    index: 1,  
    visible: false  
});  
uni.setTabBarItem({  
    index: 2,  
    visible: false  
});  
} else {  
    uni.setTabBarItem({  
        index: 1,  
        visible: true  
    });  
    uni.setTabBarItem({  
        index: 2,  
        visible: true  
    });  
}

操作步骤

在微信小程序，通过条件判断用uni.setTabBarItem设置tabbar中的某一项隐藏，但是不生效。

预期结果

希望可以隐藏。

实际结果

不生效。

bug描述


Harmonyos Next教程
5 回复

小程序端setTabBarItem没有visible属性 uniapp文档上也有说明 只支持app和h5

微信小程序端也没有此属性


OK，好的，谢谢

请问有其他解决方案吗 uniapp开发微信小程序 动态显示隐藏TabBar 目前不支持visible属性的话

可以自定义tabbar 插件市场有很多类似的插件 你可以去看下 做个参考

针对您提到的 uni-app 小程序端 uni.setTabBarItem 无效的问题，这通常是由于小程序平台的限制或者 API 使用不当导致的。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，包括 H5、App、以及各种小程序，但在不同平台上，某些 API 的表现可能会有所不同。

首先，确保您的小程序基础库版本支持 uni.setTabBarItem。此外，小程序端对于动态修改 tabBar 的限制通常比 App 端要严格，尤其是在运行时修改 tabBar 的图标或文字。

以下是一个简单的示例代码，展示如何在 uni-app 中使用 uni.setTabBarItem。请注意，这段代码在 App 端通常可以正常工作，但在小程序端可能因平台限制而无法达到预期效果。

// 假设您已经在 pages.json 中配置了 tabBar
// pages.json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}

// 在某个页面的 onLoad 或其他生命周期函数中尝试修改 tabBar
export default {
  onLoad() {
    // 尝试修改第二个 tabBar 项的文本
    uni.setTabBarItem({
      index: 1,
      text: '关于我们'
    }, (res) => {
      console.log('setTabBarItem result:', res);
      if (res.errMsg !== 'setTabBarItem:ok') {
        console.error('Failed to set tabBar item:', res.errMsg);
      }
    });
  }
}

在小程序端，如果上述代码没有生效，您可能会看到控制台输出错误信息，表明 API 调用失败。此时，您可以考虑以下几种解决方案：

  1. 检查小程序基础库版本：确保您的小程序基础库版本支持该 API。
  2. 阅读官方文档：查阅微信/支付宝/百度等小程序的官方文档，看是否有关于 setTabBarItem 的特殊说明或限制。
  3. 用户反馈：如果认为这是一个 bug，可以在对应的开发者社区或官方论坛中提交反馈。
  4. 设计调整：考虑是否可以通过其他方式（如使用自定义 tabBar）来实现相同的功能需求。

由于平台限制，有时可能需要调整设计以适应不同平台的特性。希望这些信息对您有所帮助！

回到顶部