---

1 ColorUI学习

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

1.1 准备

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

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

1.2 自定义导航栏

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

  "window": {
  "navigationBarBackgroundColor": "#39b54a",
  "navigationBarTitleText": "Color UI",
  "navigationStyle": "custom", //1 取消
  "navigationBarTextStyle": "white"
 },
  
  "usingComponents": { //2 引入
    "cu-custom":"/colorui/components/cu-custom"
  },

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;
        }
      }
})

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

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

参数

cu-custom 参数	作用	类型	默认
bgColor	背景颜色类名	String	空值 ‘’
isCustom	是否开启左侧 （箭头+房子图标）	Boolean	false
isBack	是否开启左侧（箭头+backText）	Boolean	false
bgImage	背景图片路径	String	空值 ‘’

slot块	作用
backText	在isBack为true，显示最左侧（一般是返回）
content	中间区域文字（一般是标题）
right	右侧区域文字 （一般是小提示）(icon图标)

注意 ：

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

isBack 页面跳转是：上一页

2 基础元素basic

2.1 布局 Layout

1️⃣Flex布局

class名	内容	举例css内容
flex	弹性布局（必选）	display:flex;
basis-{size}	固定布局	flex-basis:20%;
flex-{num}	比例布局	flex:1;
flex-direction	按列排列	flex-direction:column;
flex-wrap	一行排不下，换行	flex-wrap:wrap;
align-{vl}	垂直对齐(items)	align-items:flex-start;
self-{v}	元素内的某个项(self)	align-self:flex-start;
justify-{hl}	水平对齐	justify-content:flex-start;

❤固定布局-size (5种)

xs	sm	df	lg	xl
20%	40%	50%	60%	80%
加小	小号	默认	大号	加小
extra	small	default	small	extra

❤比例布局-num (3种)

sub	twice	treble
1	2	3

❤垂直对齐-v (5种)

start	end	center	stretch	baseline
上对齐	下对齐	中间对齐	两端对齐	第1行文字对齐
flex-start	flex-end	flex-center	stretch	baseline

❤水平对齐-h (5种)

start	end	center	between	around
左对齐	右对齐	居中	左右间隔相等	项目两侧的间隔相等
flex-start	flex-end	center	space-between	space-around

2️⃣Grid布局

class名	内容	举例css内容
grid	栅格布局（必须）	display:flex;flex-wrap:wrap;
col-{num}	等列	参数：1，2，3，4，5
grid-square	等高

3️⃣辅助布局

class名	作用	举例css内容
margin-{size}	外边距	margin:10rpx;
magin-{position}-{size}	外边距-具体一边	margin-top:10rpx;
padding-{size}	内边距	padding:10rpx;
fl	左浮动	float:left;
fr	右浮动	float:right;

❤辅助布局-size (6种)

0	xs	sm	默认	lg	xl
0	10rpx	20rpx	30rpx	40rpx	50rpx

---

❤辅助布局-position (6种)

top	right	bottom	left	lr	tb
上	右	下	左	left-right	top-bottom

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>

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

---

总结：

Class名	作用	举例CSS
bg-{color}	深色背景	background-color:red;color:darkColor;
line-{color}	细边框颜色	::after伪元素 border-color:red;
lines-{color}	粗边框颜色	::after伪元素 border-color:red;

2.3 文字 Text

文本	作用	Class内容
text-{size}	文字大小	font-size: 20rpx;
text-{color}	文字颜色	color: red;
text-{align}	字体对齐	text-align: center;
text-{Fixed}	固定参数	text-transform: Capitalize;

❤大小Size (8种)

size 参数	大小尺寸	说明
xs	20rpx	说明文本，标签文字等关注度低的文字
sm	24rpx	页面辅助信息，次级内容等
df	28rpx	页面默认字号，用于摘要或阅读文本
lg	32rpx	页面小标题，首要层级显示内容
xl	36rpx	页面大标题，用于结果页等单一信息页
xxl	44rpx	用于金额数字等信息
sl	80rpx	用于图标、数字等较大显示
xsl	120rpx	用于图标、数字等特大显示

---

❤颜色Color (15种)

color	颜色	内容
red	嫣红 #e54d42	❤red
orange	桔橙 #f37b1d	❤orange
yellow	明黄 #fbbd08	❤yellow
olive	橄榄 #8dc63f	❤olive
green	森绿 #39b54a	❤green
cyan	天青 #1cbbb4	❤cyan
blue	海蓝 #0081ff	❤blue
purple	姹紫 #6739b6	❤purple
mauve	木槿 #9c26b0	❤mauve
pink	桃粉 #e03997	❤pink
brown	棕褐 #a5673f	❤brown
grey	玄灰 #8799a3	❤grey
gray	草灰 #aaaaaa	❤gray
black	墨黑 #333333	❤back
white	雅白 #ffffff	❤white

---

❤对齐Align (3种)

对齐	说明
left	左
center	中
right	右

---

❤固定Fixed (2+5种)

固定	说明	代码
shadow	文字阴影	text-shadow:3px 3px 4px rgba(204,69,59,0.2)
bold	文字加粗	text-weight:100
Abc	首字母大写	text-transform: Capitalize;
ABC	全字母大写	text-transform: Uppercase;
abc	全字母小写	text-transform: Lowercase;
price	人民币 ￥	content: “¥”;font-size: 80%;margin-right: 4rpx;
cut	溢出部分，显示…	text-overflow: ellipsis;white-space: nowrap;overflow: hidden;

---

总结: 按 参数形式 我们分为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

class	说明
.solid	四周-细边框
.solid-{direction}	具体某个方向-细边框
.solids	四周-粗边框
.solids-{direction}	具体某个方向-粗边框
.shadow	根据背景颜色而改变的阴影
.shadow .shadow-lg	长阴影
.shadow-warp	翘边阴影
.shadow-blur	根据背景图而改变的阴影

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>

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

如果里面有4个

2️⃣内部修饰action

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

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

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