文章目录

1 ColorUI学习
- 1.1 准备
- 1.2 自定义导航栏
- - 1️⃣app.json 配置取消系统导航栏，并全局引入组件
  - 2️⃣app.js 获得系统信息
  - 3️⃣page wxml页面可以直接调用了
2 基础元素basic
- 2.1 布局 Layout
- - 1️⃣Flex布局
  - 2️⃣Grid布局
  - 3️⃣辅助布局
- 2.2 背景Background
- 2.3 文字 Text
- 2.4 图标icon
- 2.5 按钮Button
- 2.6 标签 Tag
- 2.7 头像 Avatar
- 2.8 进度条 Progress
- 2.9 边框阴影 Border&Shadow
- 2.10 加载 Loading
3 组件 Componet
- 3.1 操作条Tab
- - 1️⃣基本用法cu-bar
  - 2️⃣内部修饰action
  - 3️⃣操作条 tabbar
- 3.2 导航栏 nav
- 3.3 列表List
- 3.4 卡片Card
- 3.5 表单Form
- 3.6 时间轴TimeLine
- 3.7 聊天 chat
- 3.8 轮播
- 3.9 静态框 modal
- 3.10 步骤条

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.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

ColorUI使用与技巧相关推荐

里面使用轮播_小程序ColorUI框架初步使用教程及个人项目实战
小程序ColorUI框架初步使用教程及个人项目实战最近在写自己的一个微信小程序项目<阿涛技术博客>,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在 ...
keyshot怎么批量渲染_提高Keyshot逼真渲染的小技巧
Keyshot是一个特别神奇的应用软件,但是,就像Photoshop一样,如果你不知道怎么使用它,那么再优秀的工具在你手中也什么都是了.这里我就告诉你一些制作优秀效果图的技巧以及如何使用这个神奇软件. ...
Linux shell 学习笔记（6）— vim 编辑器使用方法及技巧
1. 检查 vim 软件包 1.1 CentOS 发行版 $ alias vi alias vi='vim' $ $ which vim /usr/bin/vim $ $ ls -l /usr/bin ...
Python 笔试面试及常用技巧（1）
1. 交换两个数字 In [66]: x, y = 1, 2In [67]: x Out[67]: 1In [68]: y Out[68]: 2 赋值的右侧形成了一个新的元组,左侧立即解析(unpac ...
Redis 使用技巧
Redis 现在非常受欢迎,似乎已经成为内存数据存储行业的标准.本人结合平时使用Redis经验,也同时查找了一些网上别人的总结经验,总结以下几条Redis使用技巧. 1. 停止使用 KEYS 众所周知 ...
受用一生的高效 PyCharm 使用技巧（六）
http://www.sohu.com/a/329854019_654419 大家好,今天我又来给大家更新 PyCharm 的使用技巧. 从第一篇开始,一直到本篇,一共更新了6篇文章,每篇 5 个小技 ...
受用一生的高效 PyCharm 使用技巧（四）
https://blog.csdn.net/pdcfighting/article/details/93269028 大家好,距离最近一篇 PyCharm 使用技巧的文章已经过去一月有余,最近虽然也比 ...
受用一生的高效 PyCharm 使用技巧（二）pycharm 指定参数运行文件
https://mp.weixin.qq.com/s/Ii0-qHUXayTPb-K-17hmQQ 在介绍技巧之前,有些话想声明一下,这个系列的一些小技巧,对于一些重试用户来说可能是小 case,如果 ...
受用一生的高效 PyCharm 使用技巧（一）
声明:本文章转自返回主页Python编程时光 PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. https://www.cnb ...
PyCharm 使用技巧
PyCharm 使用技巧 2018.12.15 00:26:36 字数 1034 阅读 290 JetBrains家的IDE很多技巧是通用的,说一些自己日常用得多但不一定仅限于PyCharm的技巧: ...

ColorUI使用与技巧