當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ColorUI使用与技巧

發布時間：2023/12/9 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 ColorUI使用与技巧小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

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種) xssmdflgxl

20%	40%	50%	60%	80%
加小	小號	默認	大號	加小
extra	small	default	small	extra

?比例布局-num (3種) subtwicetreble

?垂直對齊-v (5種) startendcenterstretchbaseline

上對齊	下對齊	中間對齊	兩端對齊	第1行文字對齊
flex-start	flex-end	flex-center	stretch	baseline

?水平對齊-h (5種) startendcenterbetweenaround

左對齊	右對齊	居中	左右間隔相等	項目兩側的間隔相等
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種) 0xssm默認lgxl

10rpx

20rpx

30rpx

40rpx

50rpx

?輔助布局-position (6種) toprightbottomleftlrtb

上

右

下

左

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 背景圖片加一層黑色遮罩下面開始

寫內置樣式配合用
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} 直接設置圖標

默認圖標
名稱 10context
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

效果是左右靠邊對齊相當（flex align-center justify-between）

如果里面有4個

2??內部修飾action

效果：目前看到效果，左右對齊有間隔

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使用与技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： snap7
下一篇：【 Grey Hack 】万金油脚本：从