微信小程序---底部固定导航栏tabBar

最新推荐文章于 2025-06-11 13:11:18 发布

LLL_LH

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/79527635

微信专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了app.json文件的配置项，特别是如何通过tabBar配置来实现小程序底部导航栏的个性化定制，包括颜色、背景色及导航条目的设置。

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

app.json文件：

{
  "pages": [  
    "pages/index/index",
    "pages/logs/logs",
    "pages/samplereels/samplereels",
    "pages/discover/discover",
    "pages/shop/shop",
    "pages/person/person"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#2f2f2f",
    "selectedColor": "#216d8d",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tap_bar_01.png",
        "selectedIconPath": "images/tap_bar_01_active.png"
      },
      {
        "pagePath": "pages/samplereels/samplereels",
        "text": "分类",
        "iconPath": "images/book1.png",
        "selectedIconPath": "images/book2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "images/tap_bar_02.png",
        "selectedIconPath": "images/tap_bar_02_active.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "商店",
        "iconPath": "images/tap_bar_03.png",
        "selectedIconPath": "images/tap_bar_03_active.png"
      },
      {
        "pagePath": "pages/person/person",
        "text": "我的",
        "iconPath": "images/tap_bar_04.png",
        "selectedIconPath": "images/tap_bar_04_active.png"
      }
    ],
    "position":"bottom"
  }
}

tabBar : 设置底部的tab导航栏的样式属性。
color ：底部导航栏未选择时的文字。
selectedColor：底部导航栏选中时的文字。
backgroundColor：底部导航栏的背景色。
borderStyle：底部导航栏上边框的颜色，只支持 black/white，默认black。
position：tabbar的位置，可选值 bottom、top，默认为bottom,当设置为top时，将不会显示icon。
list：导航配置的数组，最少2个，最多5个。
list数组对象：
pagePath：页面显示路径
text：导航上的文字
iconPath：图标路径，导航未选中时
selectedIconPath：选中时的图片路径