uniapp真机调试app动态显示隐藏tabbar某一项

最新推荐文章于 2024-05-16 16:31:15 发布

Rio_Gaven

最新推荐文章于 2024-05-16 16:31:15 发布

阅读量1k

点赞数 5

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/Rio_Gaven/article/details/137070380

版权

本文介绍了如何在pages.json中设置tabBar中特定项的visible属性，根据用户权限动态显示或隐藏。同时，通过uni.setTabBarItem函数实现微信开发者工具中的动态效果，并指出在测试阶段在模拟器上的问题。

摘要由CSDN通过智能技术生成

1.pages.json中设置需要显示隐藏项的visible属性, 以list中index:2为例

"tabBar": {
    "color": "#9FA8BB",
    "selectedColor": "#3E71FE",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "fontSize": "10px",
    "iconWidth": "23px",
    "spacing": "6.5px",
    "height": "50px",
    "list": [
      {
        "pagePath": "view/xxx/xxx",
        "iconPath": "static/img/index/home.png",
        "selectedIconPath": "static/img/index/home-active.png",
        "text": "xxx"
      },
      {
        "pagePath": "view/xxx/xxx",
        "iconPath": "static/img/index/data.png",
        "selectedIconPath": "static/img/index/data-active.png",
        "text": "xxx"
      },
      // #ifdef APP-PLUS
      {
        "pagePath": "view/xxx/xxx",
        "iconPath": "static/img/index/yewuban-kqdk-daka.png",
        "selectedIconPath": "static/img/index/yewuban-kqdk-daka-active.png",
        "text": "xxx",
        "visible": false
      },
      // #endif
      {
        "pagePath": "view/xxx/xxx",
        "iconPath": "static/img/index/my.png",
        "selectedIconPath": "static/img/index/my-active.png",
        "text": "xxx"
      }
    ]
  },

2.uni.setTabBarItem 根据项目角色的权限，动态显示隐藏该项

if(xxxxxx){
   console.log('添加tab');
   uni.setTabBarItem({
     index: 2,
     visible: true
   });
}else{
   console.log('隐藏tab');
   uni.setTabBarItem({
     index: 2,
     visible: false
   });
}

3.测试app有效，微信开发者工具模拟器上没有效果