小程序底部导航栏配置，app.json

Love The Way You Lie 2022-05-19 04:36 233阅读 0赞

参考链接 [https://blog.csdn.net/wujiangwei567/article/details/52763344][https_blog.csdn.net_wujiangwei567_article_details_52763344]

#### 底部导航栏配置，app.json ####

"tabBar": {
        "color": "#666666",
        "selectedColor": "#2C7DEA",
        "backgroundColor": "#F7F7FA",
        "borderStyle": "white",
        "list": [
          {
            "selectedIconPath": "images/nav/home-2.png",
            "iconPath": "images/nav/home-1.png",
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "selectedIconPath": "images/nav/exhibition-2.png",
            "iconPath": "images/nav/exhibition-1.png",
            "pagePath": "pages/exhibition/exhibition",
            "text": "展会"
          },
          {
            "selectedIconPath": "images/nav/activity-2.png",
            "iconPath": "images/nav/activity-1.png",
            "pagePath": "pages/activity/activity",
            "text": "活动"
          },
          {
            "selectedIconPath": "images/nav/me-2.png",
            "iconPath": "images/nav/me-1.png",
            "pagePath": "pages/me/me",
            "text": "我的"
          }
        ]
      }

#### 解释一下 对应的属性信息 ####

*  tabBar 指底部的 导航配置属性
 *  color 未选择时 底部导航文字的颜色
 *  selectedColor 选择时 底部导航文字的颜色
 *  borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
 *  list 导航配置数组
 *  selectedIconPath 选中时 图标路径
 *  iconPath 未选择时 图标路径
 *  pagePath 页面访问地址
 *  text 导航图标下方文字

[https_blog.csdn.net_wujiangwei567_article_details_52763344]: https://blog.csdn.net/wujiangwei567/article/details/52763344