实现TabBar底部导航栏效果

实现效果：

代码实现：（复制可用）

app.json：

{
  "pages": [
    "pages/home/home",
    "pages/forum/forum",
    "pages/publish/publish",
    "pages/msg/msg",
    "pages/my/my",
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#16a0f8",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#c9c9c9",
    "selectedColor": "#16a0f8",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-h.png"
      }, {
        "pagePath": "pages/forum/forum",
        "text": "论坛",
        "iconPath": "images/forum.png",
        "selectedIconPath": "images/forum-h.png"
      }, {
        "pagePath": "pages/publish/publish",
        "text": "发布",
        "iconPath": "images/publish-q.png",
        "selectedIconPath": "images/publish-h.png"
      }, {
        "pagePath": "pages/msg/msg",
        "text": "消息",
        "iconPath": "images/msg.png",
        "selectedIconPath": "images/msg-h.png"
      }, {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-h.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注： 图片路径和所导航的页面路径请自行更改哦