ColorUI使用与技巧

---

1 ColorUI学习

简介：ColorUI 鲜亮的高饱和色彩，专注视觉的小程序组件库
感谢：作者 文晓港

1.1 准备

引入资源 demo中的colorui – app.wxss

@import '/colorui/icon.wxss';
@import '/colorui/main.wxss';
1
2

1.2 自定义导航栏

1️⃣app.json 配置取消系统导航栏，并全局引入组件

  "window": {
  "navigationBarBackgroundColor": "#39b54a",
  "navigationBarTitleText": "Color UI",
  "navigationStyle": "custom", //1 取消
  "navigationBarTextStyle": "white"
 },
  
  "usingComponents": { //2 引入
    "cu-custom":"/colorui/components/cu-custom"
  },
1
2
3
4
5
6
7
8
9
10

2️⃣app.js 获得系统信息

wx.getSystemInfo({
	success: e => {
    	this.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
          this.globalData.Custom = capsule;
          this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          this.globalData.CustomBar = e.statusBarHeight + 50;
        }
      }
})
1
2
3
4
5
6
7
8
9
10
11
12

3️⃣page wxml页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
	<view slot="backText">返回</view>
	<view slot="content">导航栏</view>
</cu-custom>
1
2
3
4

参数

注意 ：

isCustom 页面跳转是： /pages/index/index

isBack 页面跳转是：上一页

2 基础元素basic

2.1 布局 Layout

1️⃣Flex布局

❤固定布局-size (5种) ❤比例布局-num (3种) ❤垂直对齐-v (5种) ❤水平对齐-h (5种)

2️⃣Grid布局

3️⃣辅助布局

❤辅助布局-size (6种)

---

❤辅助布局-position (6种)

2.2 背景Background

• 深色背景 bg-{color} 15个
• 浅色背景 再加个 light
• 渐变背景 bg-gradual-{color} 6个
  red/orange/green/blue/purple/pink
• 图片背景

bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变。注意，超出容器的部分可能会裁掉。
bg-mask 背景图片加一层黑色遮罩
bg-shadeTop 背景图片加一层黑色遮罩上面开始
bg-shadeBottom 背景图片加一层黑色遮罩下面开始

<view class="bg-img" 
style="background-image: url('图片路径;height: 414rpx;"></view>
1
2

写内置样式配合用
background-image
height
一个加了 遮罩，一个没有

---

总结：

2.3 文字 Text

❤大小Size (8种)

---

❤颜色Color (15种)

---

❤对齐Align (3种)

---

❤固定Fixed (2+5种)

---

总结: 按 参数形式 我们分为2种，一种是多个参数（大小，颜色，对齐），一种是固定参数（阴影，加粗，大小写等）

2.4 图标icon

• culcon-{iconName} 直接设置图标

  默认图标

  名称 10	context
  female	\e71a
  male	\e71c
  check	\e645
  close	\e646
  loading	\e7f1
  right	\e6a3
  radioboxfill	\e763
  roundclosefill	\e658
  emoji	\e64a
  icloading	\e67a

  
  这个是 main.wxss 不可删除的

图标分为 内置和外置 （都来自 阿里巴巴 iconfont）

2.5 按钮Button

• 按钮必选 cu-btn
• 默认 cu-btn，round为圆角，cuIcon为圆形包裹图标
• 尺寸 默认， sm 小尺寸， lg大尺寸
• 颜色 bg-{{colorName}}
• 阴影 shadow
• 镂空 line-{{color}} 或 lines-{{colors}} 粗边框
• 块状 lg
• 禁用 disable
• 加图标 cuIcon-{{iconName}} 包裹在 button内

button 记得去掉 “style”: “v2”,

2.6 标签 Tag

• 标签必选 cu-tag
• 默认 cu-tag，round为圆角，radius为圆角
• 尺寸 sm 小尺寸
• 颜色 bg-{{colorName}}
• 阴影 shadow
• 镂空 line-{{color}} 或 lines-{{colors}} 粗边框
• 胶囊 cu-capsule 用包裹
• 数字 badge

2.7 头像 Avatar

• 头像必选 cu-avatar
• 形状 round 圆形 radius方形
• 尺寸 sm 默认 lg xl 4种
• 内嵌文字(图标) 用包裹
• 颜色 bg-{colorName}
• 组 cu-avatar 添加 cu-avatar-group
• 标签 内 加 cu-tag

2.8 进度条 Progress

• 进度条必选 cu-progress
• 形状 默认方形 rauius 为圆角 round圆形 loading 初始是false,页面需要赋值为true
• 尺寸 默认 sm xs
• 颜色 bg-{{colorName}}
• 条纹 striped active 动态效果
• 比例 在cu-progress内 : style=“width:50%”
• 布局 包含内设置

2.9 边框阴影 Border&Shadow

direction 参数是 top -right -bottom -left

2.10 加载 Loading

• 加载必选 cu-load
• 状态 loading正在加载中，over加载完成，erro加载失败
• 背景 bg-{{colorName}}
• 弹框加载 load-modal
• 进度条加载 load-progress
• 进度条样式 load-progress-bar
• 旋转加载样式 load-progress-spinner
• 隐藏 hide
• 显示 show

3 组件 Componet

3.1 操作条Tab

• 操作条必选 cu-bar
• 操作条必选 tabbar
• 固定在页面底部 foot
• 小程序tabbar的minButton
• 购物操作条必选值 shop
• 提交按钮 submin
• 带下边框样式的标题 border-title
• css属性align-self:flex-end self-end
• 搜索框 search-form
• 输入框样式 input

1️⃣基本用法cu-bar

<view class="cu-bar">   必须的
	<view>1</view>
	<view>2</view>
</view>
1
2
3
4

效果是 左右 靠边对齐 相当（flex align-center justify-between）

如果里面有4个

2️⃣内部修饰action

<view class="cu-bar">   必须的
    <view class="action">1</view>
    <view class="action">2</view>
</view>
1
2
3
4

效果：目前看到效果，左右对齐有间隔

3️⃣操作条 tabbar

3.2 导航栏 nav

• 导航栏 nav
• 导航栏子元素 cu-item
• flex布局 flex
• 平分 flex-sub
• 居中 text-center

3.3 列表List

• 列表必选值 cu-list
• 列表子元素 cu-item
• 无边框 no-border
• 菜单列表 menu
• 短边框 sm-border
• 卡片样式的菜单列表 card-menu
• 右箭头 arrow
• 消息列表(带头像) cu-avatar
• 内容 content
• 灰度 grayscale
• cur
• 左移 move-cur

3.4 卡片Card

• 卡片必选值 cu-card
• 案例类卡片 case
• 动态类卡片 dynamic
• 文章类卡片 article
• 评论 comment
• 配合cu-card，去除子元素cu-item的margin和border no-card
• 纵向的flex布局 desc

3.5 表单Form

• 表单子元素 cu-form-group
• 标题 title

3.6 时间轴TimeLine

• cu-timeLine 包裹 cu-time和cu-item
• cu-item 包裹 content 内容

3.7 聊天 chat

• 聊天必选值 cu-chat
• 子元素 cu-item
• 右侧本人的聊天样式 self
• 聊天内容 main
• 消息内容 content
• 消息日期 date
• 提示词 cu-info

3.8 轮播

• 全屏限高轮播 screen-swiper
• 方形指示点 square-dot
• 圆形指示点 round-dot
• 卡片式轮播 card-swiper
• 滑动切换区域 swiper-item
• 堆叠式轮播 tower-swiper
• 堆叠式轮播子元素 tower-item

3.9 静态框 modal

基本

• 模态框必选 cu-modal
• 显示弹框 show
• 子元素 cu-dialog

样式

• 底部弹框 bottom-modal
• 侧边弹框 drawer-modal

说一说Modal细节
modal默认是全部居中，可在cu-diolog 后面加个内置样式 text-align:left
如：< view class=“cu-dialog” style=“text-align: left;”>

3.10 步骤条

• 步骤条必选 cu-steps
• 子元素 cu-item
• 数字步骤条未完成图标 num
• 错误图标 err
• 步骤条连接箭头 steps-arrow
• 配合多级步骤使用 steps-bottom