之前记录了weUI组件库的基础使用，现在用一下更加【漂酿】的colorUI，weUI组件库的博客在这里：

相较于weUI的使用上，colorUI会更复杂些，准确的说，是更繁琐一些，毕竟是大佬一个人肝出来的，而且对组件的样式、封装做了很强的兼容性处理，所以使用上没有weUI那种有团队做的简易，而且目前colorUI的文档，没有完成，只针对部分内容做了介绍，所以需要大家下载源码自行摸索（其实封装的挺易懂的~）

就算你觉得麻烦不想用，也完全可以留下colorUI的wxss样式文件，肯定在其他项目中能用到，cv大法好呀~

那么前言就介绍到这里，接下来会对colorUI的使用进行介绍。

colorUI在线效果演示：（用uniapp发布的h5）

colorUI仓库镜像地址：

colorUI资源网站：

一些针对colorUI组件介绍的博客：（比官方文档详细w(ﾟДﾟ)w）

使用方法

1.下载的colorUI源码后，里面有这些文件夹

2.运行demo文件夹，查看各组件效果

你可以参考效果，找到对应的代码，复制到自己的项目里去使用

当然，开着这个项目找不太方便，现在就要用到上面的地址链接了，这样方便开发。

3.template文件夹（colorUI空项目文件介绍）

【cu-custom】组件中，还有 colorUI的navigation（顶上的导航栏），详细介绍看下方【自定义顶部导航栏】

而且，在app.wxss（全局样式）文件中也引入好了colorUI的样式文件

colorUI空文件中的app.json文件，【使用顶部导航栏cu-custom组件】,替换默认的顶部导航栏效果，同时，里面舍弃了tabBar配置，博客后面会介绍tabBar在index文件中的配置，详情请看【自定义tabBar】。

自定义顶部导航栏

colorUI空文件中，app.json文件中，有一行"navigationStyle": "custom" 是原生小程序没有写的

这段代码是用来 关闭【默认导航栏样式】和 引入colorUI自定义顶部导航栏

页面中使用方法：

<!-- 顶部导航栏 组件 -->
<cu-custom bgColor="bg-gradual-blue">
  <view slot="content">ColorUI 空白模板</view>
</cu-custom>

效果如下：

你也可以做的更好看一些：

<!-- bgImage==> 顶部导航栏的背景图片
isBack="{
         
  {true}} ==》 开启返回箭头
-->
<cu-custom bgImage="../../../images/wave.gif" isBack="{
         
  {true}}">
  <!-- slot="backText" ==》 跟在返回箭头之后 -->
  <view slot="backText">返回</view>
  <!--  slot="content"===》居中的标题文字  -->
  <view slot="content">微动画</view>
</cu-custom>

这样的 navigation（顶上的导航栏）更加美观个性化：

而且：如果不在wxml中使用

自定义tabBar

原生小程序项目标准格式：

原生小程序的tabBar菜单对应的页面都在pages文件夹下，按照Page格式设置js内容；使用的组件效果则是放在对应的compoents文件夹下，每个tabBar菜单对应是一个Page页面

colorUI使用自定以tabBar的方法

在colorUI中，因为使用的是自定义的tabBar，是通过组件的形式引入到页面中，然后通过样式将这个组件固定定位 position: fixed到页面的下放bottom位置。达到跟原生tabBar类似的效果。

这里就先说一下原理，详细的代码我后单独弄一篇博客，不然这里太长了~

原生tabBar与自定义tabBar效果演示

colorUI封装的tabbar效果：

但是，原生的tabBar，限制死了就那几样配置参数

路径pagePath、菜单名文字text、未选中图标、选中图标iconPath、selectedIconPath，还有一些操作栏颜色、定位的参数，没有其他多余的配置项目了（不过也满足基础使用了）

但是如果想要实现在tabBar上的一些样式、显示效果的改动，害得是自定义tabBar

像这个按钮、红色角标都得靠封装的自定义tabBar组件来实现，原生的tabBar没法做到，各有所长吧。

以上，就是colorUI组件库的基础介绍和如何使用的介绍，更加详细的组件使用、属性说明都在上方的链接中，有不少博客参考。