微信小程序中【tabBar】的使用

最新推荐文章于 2025-06-02 09:54:28 发布

gao_jun1

最新推荐文章于 2025-06-02 09:54:28 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/gao_jun1/article/details/107468222

小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了微信小程序中底部导航栏（tabBar）的配置方法及属性详解，包括颜色设置、图标路径指定等，帮助开发者快速掌握底部导航栏的自定义技巧。

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

1、tabBar：即底部导航栏，使用的时候，需要放在【app.json】文件目录下，同时，需要放在window的后面。

【app.json】文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
在这里插入图片描述
2、tabBar的属性介绍

【color】未选择时底部导航文字的颜色

【selectColor 】选择时底部导航文字的颜色

【borderStyle】底部导航边框的样色（默认为浅灰色线条）

【list】导航配置数组

【pagePath】页面访问地址

【text】导航图标下方文字

【selectedIconPath】选中时图标路径

【iconPath】未选择时图标路径

{
  "pages":[
    "pages/index/index",
    "pages/favorite/favorite",
    "pages/cook/cook",
    "pages/my/my"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#FF6347",
    "borderStyle":"black",
    "list": [
    {
    "pagePath": "pages/index/index",
    "text": "首页",
    "selectedIconPath": "pages/img/footer1-sel.png",
    "iconPath": "pages/img/footer1.png"
    },
    {
    "pagePath": "pages/favorite/favorite",
    "text": "心愿单",
    "selectedIconPath": "pages/img/footer2-sel.png",
    "iconPath": "pages/img/footer2.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "selectedIconPath": "pages/img/footer4-sel.png",
      "iconPath": "pages/img/footer4.png"
      }
    ]
    }
}