小程序：底部菜单栏

先导知识：底部菜单栏tabBar

app.json文件中 进行底部菜单栏的配置

常用的配置项如下：

tabbar:

• color: 未选择时的颜色
• selectedColor：选中时的颜色
• borderStyle：底部导航边框的颜色
• backgroundColor：底部导航背景色
• list:导航配置数组

• pagePath：页面访问地址
• iconPath: 未选择时图片路径
• selectedIconPath: 选中时图片路径
• text:导航图表下方文字

基本配置

app.json:

"tabBar": {
        "color": "#505050",
        "selectedColor": "#1296DB",
        "list":[
          {
          "text":"主页",
          "pagePath":"pages/index/index"
          },
          {
            "text": "测试",
            "pagePath": "pages/music/index"    
          },
          {
            "text": "视频",
            "pagePath": "pages/video/index"
  
          }
        ]
      },

进阶配置

app.json:

{
{
  "pages": [
    "pages/index/index",
    "pages/test/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#505050",
    "selectedColor": "#1296DB",
    "list":[
      {
      "text":"主页",
      "pagePath":"pages/index/index",
      "iconPath":"/images/invite.png",
      "selectedIconPath": "/images/invite.png"
      },
      {
        "text": "测试",
        "pagePath": "pages/test/index",
        "iconPath": "/images/marry.png",
        "selectedIconPath": "/images/marry.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

注意事项

• 菜单栏中的地址必须真实存在
• pages中首页必须设置为菜单栏任意一个按钮的地址