导航样式的自定义 uniapp自定义tabbar_微信小程序ColorUI自定义底部导航栏Tab

1.项目中引入ColorUI

ColorUI其实是一个小程序的CSS框架。 最近它被大量使用。 恰巧我在自定义底部导航栏时遇到了一些坑，所以发了推文。

微信小程序中自定义底部导航栏tabBar的主流方式有两种。 一种是使用TabBar页面和底部导航栏作为组件来模拟切换。 但严格来说，这种方法并不适合复杂的场景。 有很多页面级的生命周期等属性不能使用。 另一种是通过微信小程序自定义TabBar界面，接管系统TabBar。 这也是本文的实现方法。 可以完美复制系统默认的TabBar，还可以添加自定义的功能实现。

1.通过文件拷贝介绍

进入ColorUI的GitHub导航样式的自定义，下拉全部代码。 项目中有三个目录，一个是ColorUI-UniApp，即uni-app版本，一个是demo的完整案例版本，一个是模板的初始开发版本。 复制演示或模板文件夹。 ColorUI文件夹复制到项目根目录下。

App.wxss引入了关键的Css main.wxss icon.wxss。

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

2、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": "我的"    }]  },

3.app.json