微信小程序（tabBar)_tabbar-show-guide.uc.cn

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景,详细的可以参考微信官方文档tabBar

​​​​​​​地址

使用流程：

自定义tabBar必须要有2个tab

1.先把自己的菜单栏图片添加到项目中

2.使用tabBar要在全局的app.json中使用

2.1:利用全局app.json创建几个tab 页面

    "pages/index/index",
    "pages/cart/cart",
    "pages/category/category",
    "pages/my/my"

2.2：在app.json中使用tabBar

命令解读：

pagePath：图二的所创建的tab页面

text：文本

iconPtian：你所导入项目的图标地址

selectedIconPath：选中后的图标地址

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/icons/home.png",
      "selectedIconPath": "/icons/home-0.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/icons/cart.png",
      "selectedIconPath": "/icons/cart-0.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "菜单栏",
      "iconPath": "/icons/category.png",
      "selectedIconPath": "/icons/category-0.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-0.png"
    }
  ]}

如果想要在默认启动页用tabBar，可以把pagePath设置成app.json-->pages数组中的第一个就可以了。

效果图：