微信小程序开发之底部导航栏和自定义底部导航栏

一、底部导航栏

第一步，打开app.json，在pages属性中添加底部tab页

"pages":[
    "pages/index/index",
    "pages/user/user"
 ]

第二步，添加tabBar属性进行配置

"tabBar": {
    "color": "#000000",  //tab 上的文字默认颜色，仅支持十六进制颜色
    "selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色
    "backgroundColor": "#FFFFFF",  //tab 的背景色，仅支持十六进制颜色
    "borderStyle": "black",  //tabbar 上边框的颜色， 仅支持 black / white
    "position": "bottom",  //tabBar 的位置，仅支持 bottom / top
    "custom": false,  //自定义tabBar
    "list": [  //tab 的列表，最少 2 个、最多 5 个 tab
      {
        "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
        "text": "首页",  //tab 上按钮文字
        "iconPath": "static/img/index.png",  //图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
        "selectedIconPath": "/static/img/selectedIndex.png"  //选中时的图片路径，不支持网络图片，当 position 为 top 时，不显示 icon
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "static/img/user.png",
        "selectedIc