微信小程序开发-tabBar

最新推荐文章于 2025-02-11 11:26:41 发布

kk star

最新推荐文章于 2025-02-11 11:26:41 发布

阅读量296

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/noner_n/article/details/107051344

版权

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

12 篇文章

订阅专栏

本文详细介绍微信小程序中tabBar的配置选项，包括字体颜色、选中颜色、背景颜色等样式调整，以及如何通过list数组设置跳转页面、按钮文字和图标路径。掌握这些技巧，轻松定制小程序底部导航。

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

微信开发者文档中的介绍：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

微信小程序的tabBar支持以下样式的更换：

1、字体颜色：color
2、选中时字体颜色：selectedColor
3、背景颜色：backgroundColor //不填的话背景颜色就是默认白色//
4、上边框颜色：borderStyle //默认黑色//
5、位置（上或下）：position [top/bottom]//默认底部//
6、是否开启自定义模式：custom[true/false]//默认不开//
7、使用list数组来作为tabBar中跳转页面的载体：//list中数量只能是2-5个
list中有4个属性：
1、pagePath 跳转页面的路径
2、 text 按钮文字
3、iconPath 按钮图标路径
4、 selectedIconPath 选中时按钮图标路径

"tabBar": {
    "color":        ,  
    "selectedColor":    ,

    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },