uniapp - 底部标签式导航

效果：

  

 

1、阿里巴巴矢量图标库：下载静态图标，放在static目录下

2、创建各页面：进行创建页面，默认情况下会在pages.json中添加路由配置

    

           

    

 

3、pages.json配置底部导航

           pages.json默认路由加载第一个页面，想要显示底部导航菜单，把wx.vue调整到第一位

          首先在"pages"中配置好所有页面，然后在" tabBar"中配置底部导航

 

  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#49e223",
    "borderStyle": "black",
    "backgroundColor": "#f0fffe",
    "list": [{
      "pagePath": "pages/wx/wx",
      "iconPath": "static/icon_tab/wechat.png",
      "selectedIconPath": "static//icon_tab/wechat_hl.png",
      "text": "微信"
      },
     …
    }]
 }