微信小程序之底部导航栏的设计

微信小程序提供了tabBar属性，使用起来非常方便。

传送门

官方文档。

在app.json里进行配置

 "tabBar": {
    "color": "#333",
    "selectedColor": "#d43c33",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "/static/images/tabs/home.png",
        "selectedIconPath": "/static/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/video/video",
        "text": "视频",
        "iconPath": "/static/images/tabs/select.png",
        "selectedIconPath": "/static/images/tabs/selected.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人",
        "iconPath": "/static/images/tabs/tab-my.png",
        "selectedIconPath": "/static/images/tabs/tab-my-current.png"
      }
    ]
  },

微信小程序之底部导航栏的设计_ide