微信小程序tabBar的使用，导航栏实例

微信小程序的导航栏，也就是标题栏的格式是规定好的，不可以改动。同样，小程序提供的Tab栏也是规定好的格式，不过可以修改其属性。

下面附上使用方法：

比如，如果希望在APP的首页设置tabbar,则在app.json里添加如下代码：

{
  "pages":[
    "pages/index/index",
    "pages/components/mine/mine"
  ],
  "window":{
    "backgroundColor":"#f4f4f4",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FF5722",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle":"#FFFFFF"
  },
  "tabBar": {
    "color": "#959394",  //文字默认颜色
    "selectedColor": "#959394",//文字被选中时的颜色
    "backgroundColor": "#f0f0f0",//背景色
    "borderStyle": "white",//TAB栏边框颜色
    "list": [
      {
        "pagePath": "pages/index/index", //导航页面
        "iconPath": "pages/images/home_b.png",//默认图片路径
        "selectedIconPath": "pages/images/home.png",//被选中时的图片路径
        "text": "首页"
      },
      {
        "pagePath": "pages/components/mine/mine",
        "iconPath": "pages/images/mine_b.png",
        "selectedIconPath": "pages/images/mine.png",
        "text": "帮助"
      }
    ]
  }
}

注：每个page都可以添加tabBar,子页面的会覆盖app.json的内容。

如果希望点击时容易识别，建议“iconPath”和'selectedIconPath"这张图片不同。

体验自然语言查询小程序可以用微信扫下面的头像，

或者直接下载代码：

微信小程序Demo

 技术交流群：