微信小程序初学之底部导航栏

在App.json中进行全局配置

通过pages来进行页面的路径配置

在微信小程序开发中底部导航栏有专门的控件TabBar来进行显示底部导航栏

TabBar的属性信息

tabBar指底部的 导航配置属性

color未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle底部导航边框的样色（注意这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字

详细请参考微信微信小程序TabBar官方文档

"tabBar": {

    "selectedColor": "#57A2FF",

    "color": "#999999",

    "borderStyle": "white",

    "backgroundColor": "#FFFFFF",

    "list": [

      {

        "pagePath": "page/Home/index",

        "text": "首页",

        "iconPath": "images/shouye_1.png",

        "selectedIconPath": "images/shouye.png"

      },

      {

        "pagePath": "page/DK/index",

        "text": "大全",

        "iconPath": "images/daikuandaquan_1.png",

        "selectedIconPath": "images/daikuandaquan.png"

      },

      {

        "pagePath": "page/My/index",

        "text": "我的",

        "iconPath": "images/wode_1.png",

        "selectedIconPath": "images/wode.png"

      }

    ]

  },

  "networkTimeout": {

    "request": 10000,

    "connectSocket": 10000,

    "uploadFile": 10000,

    "downloadFile": 10000

  },

  "debug": true

}

完成后此图如下

---