小程序（一）——底部导航栏tabbar

常见的底部导航栏，效果图如下

[图片上传中...(路径.png-a1c968-1531798229258-0)]

1.tabbar首先在app.json里面配置

app.json配置

{
  "pages": [
    "pages/gov/person/person",
    
    "pages/gov/company/company",
    "pages/gov/mine/mine",
    "pages/gov/network/network",
      "pages/index/index",
      "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "white",
    "navigationBarBackgroundColor": "#00a9e9",
    "navigationBarTitleText": "宝安政务",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#757575",
    "selectedColor": "#00a9e9",
    "list": [
      {
        "pagePath": "pages/gov/person/person",
        "text": "个人办事",
        "iconPath": "pages/res/pic/person.png",
        "selectedIconPath": "pages/res/pic/person-hover.png"
      },
      {
        "pagePath": "pages/gov/company/company",
        "text": "企业办事",
        "iconPath": "pages/res/pic/company.png",
        "selectedIconPath": "pages/res/pic/company-hover.png"
      },
      {
        "pagePath": "pages/gov/network/network",
        "text": "服务网点",
        "iconPath": "pages/res/pic/network.png",
        "selectedIconPath": "pages/res/pic/network-hover.png"
      },
      {
        "pagePath": "pages/gov/mine/mine",
        "text": "我的",
        "iconPath": "pages/res/pic/mine.png",
        "selectedIconPath": "pages/res/pic/mine-hover.png"
      }
    ]
  }
}

1.tabBar下面的color代表导航栏字体颜色，selectedColor代表选中的颜色
2.list下面条目

• pagePath 代表这个栏目下面的页面路径
• text代表栏目下面的文字
• iconPath代表未选中时的tab图片路径
• selectedIconPath代表选中时候的tab图片路径

2.新建tab栏目相应的页面，图片放在相应的路径下

路径.png

注意！app.json下面的pages节点下面，第一个条目一定要是tabBar中的路径页面，不然会不显示

这样，我们的底部导航栏就做好了。