创建APP导航栏

给小程序添加导航栏

在app.json文件夹中的大括号里，先配置页面信息，把对应的页面路径添加上

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/button/button"
  ],

再添加tabBar选项，敲“tab”会提示，敲回车会自动载入tabBar相关参数,导航最少设置2个最多5个，结果如下

注意app.json中不能添加注释

"tabBar": {
  "list": [{
    "pagePath": "pagePath",
    "text": "text",
    "iconPath": "iconPath",
    "selectedIconPath": "selectedIconPath"
  }]
}

tabBar导航

"list": [//导航列表

{
    "pagePath": "对应页面的路径",
    "text": "显示的文字",
    "iconPath": "显示的图标或图片",
    "selectedIconPath": "处于当前页面时对应的图标会图片"
  }

]

可修改成如下效果：

"tabBar": {
  "color":"#a9b6e6",
  "selectedColor":"#11c666",
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath": "pages/images/home1.png",
    "selectedIconPath": "pages/images/home2.png"
  },
  {
    "pagePath": "pages/logs/logs",
    "text": "音乐库",
    "iconPath": "pages/images/爱心1.png",
    "selectedIconPath": "pages/images/爱心2.png"
  },
  {
    "pagePath": "pages/button/button",
    "text": "个人中心",
    "iconPath": "pages/images/个人中心.png",
    "selectedIconPath": "pages/images/个人中心2.png"
  }
  ]
}