微信小程序tabBar使用

最新推荐文章于 2025-07-10 11:29:27 发布

zhou_xuexi

最新推荐文章于 2025-07-10 11:29:27 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发

本文链接：https://blog.youkuaiyun.com/zhou_xuexi/article/details/53538749

微信小程序开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了微信小程序中tabBar的配置方法，包括如何在app.json文件中设置页面路径及文字，以及注意事项如tab数量限制等。

微信小城的tabBar就是微信小程序页面下面的显示的tab标签栏，用来切换页面只能再app.json中配置代码如下

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mediaImage/index",
    "pages/magazineImage/index"
  ],
  "tabBar": {
    "list": [{
      "pagePath": "pages/mediaImage/index",
      "text": "媒体图片"
    }, {
      "pagePath": "pages/magazineImage/index",
      "text": "上刊图片"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle":"black"
  }
}

微信规定tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

然后这里还要注意一个点就是你这个list里面配置的pagePath对应的页面才会显示，没有配置到这个list里面的页面是不会显示对应的tab栏