微信小程序底部导航栏

“花树得晴红欲染，远山过雨青如滴”

序

最近自己在研究微信小程序，几乎每个程序都会有导航栏，或在顶部，或在底部。于是我简单做了一个导航栏在底部的程序。

正文

这里就直接贴代码了：

在app.json里面添加tabBar

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/home_selected.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/add_selected.png",
        "iconPath": "images/add.png",
        "pagePath": "pages/deploy/deploy",
        "text": "发布"
      },
      {
        "selectedIconPath": "images/account_selected.png",
        "iconPath": "images/account.png",
        "pagePath": "pages/account/account",
        "text": "我的"
      }
    ]
  }

解释一下属性的作用：

tabBar  指底部的 导航配置属性
color  未选择时 底部导航文字的颜色
selectedColor  选择时 底部导航文字的颜色
borderStyle  底部导航边框的样色
list   导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text  导航图标下方文字

具体请看官方文档：微信官方文档：Tabbar

效果是这样的：