微信小程序tabBar 底部菜单栏不显示的问题解决

最新推荐文章于 2025-06-19 15:24:40 发布

原创最新推荐文章于 2025-06-19 15:24:40 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

1 篇文章

订阅专栏

本文阐述了在微信小程序开发中遇到的tabBar显示问题，通过调整pages和tabBar配置，将初始页面纳入tabBar列表，成功实现了底部tabBar的正常显示。

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

问题阐述：

在写微信小程序时需要用到tabBar这个功能，但是在app.json文件中写好pages和tabBar保存刷新编译后，预览页面中没有显示底部tab

"pages": [
    "pages/index/index",
    "pages/todo/todo",
    "pages/diary/diary",
    "pages/record/record"
  ],
  
"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "demo",
    "navigationBarTextStyle": "black"
  },
  
"tabBar": {
    "list": [{
      "pagePath": "pages/todo/todo",
      "text": "one"
    },{
      "pagePath": "pages/diary/diary",
      "text": "two"
    },{
      "pagePath": "pages/record/record",
      "text": "three"
    } ]
}

问题解决：

1、将pages中的tab页面放到前面，但是index会无法显示，页面直接是tab内容

"pages": [
    "pages/todo/todo",
    "pages/diary/diary",
    "pages/record/record",
    "pages/index/index"
  ],

2、比较好的解决方法是让 tabBar 中包含 index 初始页面这一项

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "one"
    },{
      "pagePath": "pages/diary/diary",
      "text": "two"
    },{
      "pagePath": "pages/record/record",
      "text": "three"
    } ]
}

这样问题就解决了，再次保存刷新编译，底部成功显示出tabBar