uniapp 自定义tabbar_微信小程序ColorUI自定义底部导航条TabBar

一、项目中引入ColorUI

ColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。

微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管系统TabBar，这也是本文的实现方法，能够完美复刻默认系统TabBar，更可增加自定义的功能实现。

一、通过文件复制引入

1. 进入ColorUI 的GitHub，拉下所有代码，项目中有三个目录，一个是ColorUI-UniApp这个是uni-app版本，一个是demo完整的案例版本，一个是template初始开发版本，复制demo或者template文件夹中的ColorUI文件夹至项目根目录。

2. App.wxss 引入关键Css main.wxss icon.wxss 即可。

   @import "ColorUI/main.wxss";@import "ColorUI/icon.wxss";
   

二、app.json中配置系统tabBar

虽然是自定义tabBar，但是tabBar的配置还是要有。

"tabBar": {
        "list": [{
          "pagePath": "pages/index/index",      "text": "首页"    }, {
          "pagePath": "pages/category/category",      "text": "分类"    }, {
          "pagePath": "pages/cart/cart",      "text": "购物车"    }, {
          "pagePath": "pages/user/user",      "text": "我的"    }]  },

三、app.json