关于UNI-APP tabbar无法显示的坑

最新推荐文章于 2025-04-23 15:31:11 发布

黎前点星

最新推荐文章于 2025-04-23 15:31:11 发布

阅读量7k

点赞数 5

原文链接：https://blog.youkuaiyun.com/yellowallen/article/details/108272015

版权

在uniapp中开发小程序时遇到tabbar显示不出来的问题，即使按照官方文档配置也没能成功。经过排查，发现两个解决方案：1.删除pages里的index页面；2.确保tabbar配置包含index页面。问题的原理有待进一步探究。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp上开发小程序的时候，查看了官网的文档配置设置tabbar，编译完全没问题，但是始终显示不出来，最后经过排查发现很诡异的问题，具体原理后续再问问吧。先上代码：

{
   "pages": [{
       "path": "pages/login/login",
       "style": {}
   },
   {
       "path":"pages/index/index",
       "style":{
           "navigationBarTitleText":"首页"
       }
   },
   {
       "path": "pages/login/forget",
       "style": {}
   }, {
       "path": "pages/login/register",
       "style": {}
   },{
       "path" : "pages/order/order",
       "style" : {}
   }
   ,{
       "path" : "pages/report/report",
       "style" : {}
   },{
       "path":"pages/monitor/monitor",
       "style":{}
   }],
   "globalStyle": {
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "MQ-1",
       "navigationBarBackgroundColor": "#F8F8F8",
       "backgroundColor": "#F8F8F8"
   },
   "tabBar":{
       "color": "#ADADAD",
       "selectedColor": "#FEE42A",
       "backgroundColor": "#FFFFFF",
       "borderStyle": "black",
       "list": [
           {
               "text": "订单",
               "pagePath":"pages/order/order",
               "iconPath": "static/tabbar/order.png",
               "selectedIconPath": "static/tabbar/orderSelect.png"
           },
           {
               "text": "监控页面",
               "pagePath":"pages/monitor/monitor",
               "iconPath": "static/tabbar/monitor.png",
               "selectedIconPath": "static/tabbar/monitorSelect.png"
           }, {
               "text": "报表",
               "pagePath":"pages/report/report",
               "iconPath": "static/tabbar/report.png",
               "selectedIconPath": "static/tabbar/reportSelect.png"
           }
       ]
   }
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61

但是无论如何始终无法显示tabbar，经过多次尝试，有两种解决方案：
1.pages里面将index页面给删除。
2.tabbar中的配置必须包含index。
————————————————
版权声明：本文为优快云博主「yellowallen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/yellowallen/article/details/108272015