小程序ColorUI使用简易教程
生活随笔
收集整理的這篇文章主要介紹了
小程序ColorUI使用简易教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本教程配合官方示例食用更佳！！！
目錄
前言
快速上手
使用UniApp開發
開始
使用自定義導航欄
使用原生小程序開發
從現有項目開始
從新項目開始
使用自定義導航欄
組件
基礎元素
layout布局
Background背景?
Text文字
Icon圖標
Button按鈕
Tag標簽
Avatar頭像
Progress進度條?
Border&Shadow邊框陰影?
Loading加載
交互組件
?
前言
?
ColorUI是一個css庫！！！在你引入樣式后可以根據class來調用組件?
快速上手
使用UniApp開發
開始
下載源碼解壓獲得/Colorui-UniApp文件夾，復制目錄下的?/colorui?文件夾到你的項目根目錄
App.vue?引入關鍵Css?main.css?icon.css
<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的項目css */ .... </style>使用自定義導航欄
導航欄作為常用組件有做簡單封裝，當然你也可以直接復制代碼結構自己修改，達到個性化目的。
App.vue?獲得系統信息
onLaunch: function() {uni.getSystemInfo({success: function(e) {// #ifndef MPVue.prototype.StatusBar = e.statusBarHeight;if (e.platform == 'android') {Vue.prototype.CustomBar = e.statusBarHeight + 50;} else {Vue.prototype.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINVue.prototype.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();Vue.prototype.Custom = custom;Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif // #ifdef MP-ALIPAYVue.prototype.StatusBar = e.statusBarHeight;Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;// #endif}}) },pages.json?配置取消系統導航欄
"globalStyle": {"navigationStyle": "custom" },復制代碼結構可以直接使用，注意全局變量的獲取。
使用封裝,在main.js?引入?cu-custom?組件。
import cuCustom from './colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom)page.vue?頁面可以直接調用了
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">導航欄</block> </cu-custom>| bgColor | 背景顏色類名 | String | '' |
| isBack | 是否開啟返回 | Boolean | false |
| bgImage | 背景圖片路徑 | String | '' |
| backText | 返回時的文字 |
| content | 中間區域 |
| right | 右側區域(小程序端可使用范圍很窄！) |
使用原生小程序開發
從現有項目開始
下載源碼解壓獲得/demo，復制目錄下的?/colorui?文件夾到你的項目根目錄
App.wxss?引入關鍵Css?main.wxss?icon.wxss
@import "colorui/main.wxss"; @import "colorui/icon.wxss"; @import "app.css"; /* 你的項目css */ ....從新項目開始
下載源碼解壓獲得/template，復制/template并重命名為你的項目，導入到小程序開發工具既可以開始你的新項目了
使用自定義導航欄
導航欄作為常用組件有做簡單封裝，當然你也可以直接復制代碼結構自己修改，達到個性化目的。
App.js?獲得系統信息
onLaunch: function() {wx.getSystemInfo({success: e => {this.globalData.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;}}) },App.json?配置取消系統導航欄,并全局引入組件
"window": {"navigationStyle": "custom" }, "usingComponents": {"cu-custom":"/colorui/components/cu-custom" }page.wxml?頁面可以直接調用了
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">導航欄</view> </cu-custom>| bgColor | 背景顏色類名 | String | '' |
| isBack | 是否開啟返回 | Boolean | false |
| isCustom | 是否開啟左側膠囊 | Boolean | false |
| bgImage | 背景圖片路徑 | String | '' |
| backText | 返回時的文字 |
| content | 中間區域 |
| right | 右側區域(小程序端可使用范圍很窄！) |
組件
基礎元素
layout布局
Flex布局
父級添加class名flex
- 固定尺寸
通過添加class名basic-{{options}}來設置分欄大小，options可以取五個值，分別為xs、sm、df、lg、xl
?
<view class="padding bg-white"><view class="flex flex-wrap"><view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view><view class="basis-df"></view><view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view><view class="basis-df"></view><view class="basis-df bg-grey margin-xs padding-sm radius">df(50%)</view><view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view><view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view></view> </view>- 比例布局
通過添加class名flex-{{options}}來設置分欄大小，options可以取值sub、twice、treble，分別代表占比1，2，3
<view class="padding bg-white"><view class="flex"><view class="flex-sub bg-grey padding-sm margin-xs radius">1</view><view class="flex-sub bg-grey padding-sm margin-xs radius">1</view></view><view class="flex"><view class="flex-sub bg-grey padding-sm margin-xs radius">1</view><view class="flex-twice bg-grey padding-sm margin-xs radius">2</view></view><view class="flex"><view class="flex-sub bg-grey padding-sm margin-xs radius">1</view><view class="flex-twice bg-grey padding-sm margin-xs radius">2</view><view class="flex-treble bg-grey padding-sm margin-xs radius">3</view></view> </view>- 水平對齊（justify）
通過添加class名justify-{{options}}來設置盒子水平對齊方式，options可以取值start、end、center、between、around，效果可以參考flex布局布局中的容器屬性justify-content（Flex布局教程）
<view class="bg-white"><view class="flex solid-bottom padding justify-start"><view class="bg-grey padding-sm margin-xs radius">start</view><view class="bg-grey padding-sm margin-xs radius">start</view></view><view class="flex solid-bottom padding justify-end"><view class="bg-grey padding-sm margin-xs radius">end</view><view class="bg-grey padding-sm margin-xs radius">end</view></view><view class="flex solid-bottom padding justify-center"><view class="bg-grey padding-sm margin-xs radius">center</view><view class="bg-grey padding-sm margin-xs radius">center</view></view><view class="flex solid-bottom padding justify-between"><view class="bg-grey padding-sm margin-xs radius">between</view><view class="bg-grey padding-sm margin-xs radius">between</view></view><view class="flex solid-bottom padding justify-around"><view class="bg-grey padding-sm margin-xs radius">around</view><view class="bg-grey padding-sm margin-xs radius">around</view></view> </view>- 垂直對齊（align）
通過添加class名align-{{options}}來設置盒子垂直對齊方式，options可以取值start、end、center，效果可以參考flex布局布局中的容器屬性align-item（Flex布局教程）
<view class="bg-white"><view class="flex solid-bottom padding align-start"><view class="bg-grey padding-lg margin-xs radius">ColorUi</view><view class="bg-grey padding-sm margin-xs radius">start</view></view><view class="flex solid-bottom padding align-end"><view class="bg-grey padding-lg margin-xs radius">ColorUi</view><view class="bg-grey padding-sm margin-xs radius">end</view></view><view class="flex solid-bottom padding align-center"><view class="bg-grey padding-lg margin-xs radius">ColorUi</view><view class="bg-grey padding-sm margin-xs radius">center</view></view> </view>Grid布局
父級添加class名grid
- 等分列
通過添加class名col-{{options}}來實現柵格布局，options可以取值1、2、3、4、5
<view class="bg-white padding"><view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)"><view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)" :key="indexs">{{index+1}}</view></view> </view>- 等高
通過添加class名grid-square設置盒子內容等高，添加col-{{options}}來設置分欄個數，options可以取值1、2、3、4、5，將盒子等分
<view class="bg-white padding"><view class="grid col-4 grid-square"><view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view></view> </view>----------------------------------------------------------------------------------------data() {return {avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],} },布局相關class
| flex | flex布局必選值 | —— |
| basic-{{options}} | 設置分欄大小 | xs/sm/df/lg/xl |
| flex-{{options}} | 以比例設置分欄大小 | sub/twice/treble |
| justify-{{options}} | 水平對齊方式 | start/end/center/between/around |
| align-{{options}} | 垂直對齊方式 | start/end/center |
| grid | grid布局必選值 | —— |
| col-{{options}} | 柵格布局 | 1/2/3/4/5 |
| grid-square | 等高 | —— |
| fl | 左浮 | —— |
| fr | 右浮 | —— |
| margin-{{options}} | 外邊距 | xs/sm/df/lg/xl |
| padding-{{options}} | 內邊距 | xs/sm/df/lg/xl |
| margin-lr-{{options}} | 水平方向外邊距 | xs/sm/df/lg/xl |
| padding-lr-{{options}} | 水平方向內邊距 | xs/sm/df/lg/xl |
| margin-tb-{{options}} | 垂直方向外邊距 | xs/sm/df/lg/xl |
| padding-tb-{{options}} | 垂直方向內邊距 | xs/sm/df/lg/xl |
| margin-top-{{options}} | 上外邊距 | xs/sm/df/lg/xl |
| padding-top-{{options}} | 上內邊距 | xs/sm/df/lg/xl |
| margin-right-{{options}} | 右外邊距 | xs/sm/df/lg/xl |
| padding-right-{{options}} | 右內邊距 | xs/sm/df/lg/xl |
| margin-bottom-{{options}} | 下外邊距 | xs/sm/df/lg/xl |
| padding-bottom-{{options}} | 下內邊距 | xs/sm/df/lg/xl |
| margin-left-{{options}} | 左外邊距 | xs/sm/df/lg/xl |
| padding-left-{{options}} | 左內邊距 | xs/sm/df/lg/xl |
?注：lr，left-right；tb，top-bottom；?
Background背景?
顏色背景?
- 深色?
?通過添加class名bg-{{options}}設置背景
?
<view class="grid col-3 padding-sm"><view class="padding-sm" v-for="(item,index) in ColorList" :key="index"><view class="padding radius text-center shadow-blur" :class="'bg-' + item.name"><view class="text-lg">{{item.title}}</view><view class="margin-top-sm text-Abc">{{item.name}}</view></view></view> </view>- 淺色
?通過添加class名bg-{{options}}設置背景顏色，添加class名light表示相應的淺色
<view class="grid col-3 bg-white padding-sm"><view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12"><view class="padding radius text-center light" :class="'bg-' + item.name"><view class="text-lg">{{item.title}}</view><view class="margin-top-sm text-Abc">{{item.name}}</view></view></view> </view>- ?漸變
通過添加class名bg-gradual-{{options}}設置漸變背景顏色
<view class="grid col-2 padding-sm"><view class="padding-sm"><view class="bg-gradual-red padding radius text-center shadow-blur"><view class="text-lg">魅紅</view><view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view></view></view><view class="padding-sm"><view class="bg-gradual-orange padding radius text-center shadow-blur"><view class="text-lg">鎏金</view><view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view></view></view><view class="padding-sm"><view class="bg-gradual-green padding radius text-center shadow-blur"><view class="text-lg">翠柳</view><view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view></view></view><view class="padding-sm"><view class="bg-gradual-blue padding radius text-center shadow-blur"><view class="text-lg">靛青</view><view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view></view></view><view class="padding-sm"><view class="bg-gradual-purple padding radius text-center shadow-blur"><view class="text-lg">惑紫</view><view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view></view></view><view class="padding-sm"><view class="bg-gradual-pink padding radius text-center shadow-blur"><view class="text-lg">霞彩</view><view class="margin-top-sm text-Abc">#ec008c - #6739b6</view></view></view> </view>?圖片背景
- 透明背景（文字層）
通過bg-img設置圖片背景，bg-mask設置透明遮罩層
<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;"><view class="padding-xl text-white"><view class="padding-xs text-xxl text-bold">鋼鐵之翼</view><view class="padding-xs text-lg">Only the guilty need fear me.</view></view> </view>?通過bg-shadeTop設置遮罩層上陰影，bg-shadeBottom設置遮罩層下陰影
<view class="grid col-2"><view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;"><view class="bg-shadeTop padding padding-bottom-xl">上面開始</view></view><view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;"><view class="bg-shadeBottom padding padding-top-xl flex-sub">下面開始</view></view> </view>?背景相關class
| bg-{{options}} | 設置背景色 | red/orange/yellow/olive/green/cyan/blue/purple/mauve/pink/ brown/grey/gray/black/white |
| light | 淺色背景，配合bg-{{options}}使用，取值前12個 | —— |
| bg-gradual-{{options}} | 漸變色背景 | red/orange/green/blue/purple/pink |
| bg-img | 圖片背景 | —— |
| bg-mask | 遮罩層 | —— |
| bg-shadeTop | 遮罩層上陰影 | —— |
| bg-shadeBottom | 遮罩層下陰影 | —— |
| shadow-blur | 外陰影 | —— |
Text文字
文字大小
通過添加class名text-{{size}}設置文字大小，size取值xs、sm、df、lg、xl、xxl、sl、xsl
?
文字顏色
通過添加class名text-{{color}}設置文字顏色，color取值red、orange、yellow、olive、green、cyan、blue、purple、mauve、brown、grey、gray、black、white
<view class="grid col-5 padding-sm"><view class="padding-sm" v-for="(item,index) in ColorList" :key="index"><view class="text-center" :class="'text-' + item.name">{{item.title}}</view></view> </view>
文字陰影
通過添加class名text-shadow設置文字陰影
<view class="grid col-5 padding-sm"><view class="padding-sm" v-for="(item,index) in ColorList" :key="index"><view class="text-center text-shadow" :class="'text-' + item.name"><view class="cuIcon-ellipse text-xxl"></view></view></view> </view>文字截斷
通過添加class名text-cut設置文字長度溢出顯示省略號
<view class="padding bg-white"><view class="text-cut padding bg-grey radius" style="width:220px">我于殺戮之中綻放 ,亦如黎明中的花朵</view> </view>文字對齊?
通過添加class名text-{{position}}設置文字長度溢出顯示省略號，position取值left、center、right
<view class="padding bg-white"><view class="text-left padding">我于殺戮之中綻放 ,亦如黎明中的花朵</view><view class="text-center padding">我于殺戮之中綻放 ,亦如黎明中的花朵</view><view class="text-right padding">我于殺戮之中綻放 ,亦如黎明中的花朵</view> </view>?特殊文字
通過添加class名text-price表示價格，會顯示￥符號，text-Abc設置英文首字母大寫，text-ABC設置英文大寫，text-abc設置英文小寫
<view class="padding text-center"><view class="padding-lr bg-white"><view class="solid-bottom padding"><text class="text-price">80.00</text></view><view class="padding">價格文本，利用偽元素添加"￥"符號</view></view><view class="padding-lr bg-white margin-top"><view class="solid-bottom padding"><text class="text-Abc">color Ui</text></view><view class="padding">英文單詞首字母大寫</view></view><view class="padding-lr bg-white margin-top"><view class="solid-bottom padding"><text class="text-ABC">color Ui</text></view><view class="padding">全部字母大寫</view></view><view class="padding-lr bg-white margin-top"><view class="solid-bottom padding"><text class="text-abc">color Ui</text></view><view class="padding">全部字母小寫</view></view> </view>文字相關class
| text-{{size}} | 文字大小 | xs(20upx)/sm(24upx)/df(28upx)/lg(32upx)/xl(36upx)/xxl(44upx)/sl(80upx)/xsl(120upx) |
| text-{{color}} | 文字顏色 | red/orange/yellow/olive/green/cyan/blue/purple/mauve/brown/grey/gray/black/white |
| text-shadow | 文字陰影 | —— |
| text-cut | 文字截斷 | —— |
| text-bold | 文字加粗 | —— |
| text-{{position}} | 文字對齊 | left/center/right |
| text-price | 帶￥符號 | —— |
| text-Abc | 首字母大寫 | —— |
| text-ABC | 全部大寫 | —— |
| text-abc | 全部小寫 | —— |
Icon圖標
通過添加class名cuIcon-{{iconName}}，直接設置圖標
Button按鈕
按鈕必選class?cu-btn
按鈕形狀
通過添加class名設置按鈕不同形狀，默認只需要添加cu-btn，round為圓角，cuIcon為圓形用來包裹圖標
<view class="padding flex flex-wrap justify-between align-center bg-white"><button class="cu-btn">默認</button><button class="cu-btn round">圓角</button><button class="cu-btn cuIcon"><text class="cuIcon-goodsfill"></text></button> </view>按鈕尺寸
sm小尺寸，lg大尺寸
<view class="padding flex flex-wrap justify-between align-center bg-white"><button class="cu-btn round sm">小尺寸</button><button class="cu-btn round">默認</button><button class="cu-btn round lg">大尺寸</button> </view>按鈕顏色?
添加背景class名就可以，用法參考背景組件的介紹
?
<view class="grid col-5 padding-sm"><view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index"><button class="cu-btn round" :class="'bg-' + item.name ">{{item.title}}</button></view> </view>幽靈按鈕
通過line-{{color}}或者lines-{{color}}設置鏤空的幽靈按鈕
<view class="grid col-5 padding-sm"><view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'"><button class="cu-btn round" :class="'line-' + item.name">{{item.title}}</button></view> </view>禁用按鈕
添加disabled禁用按鈕
<view class="padding"><button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">無效狀態</button><button class="cu-btn block line-blue margin-tb-sm lg" disabled>無效狀態</button> </view>?自定義圖標按鈕
可以直接在button標簽class內添加圖標名，或者在text等其他標簽內添加class，其他標簽要包裹在button標簽內
<view class="padding-xl"><button class="cu-btn block line-orange lg cuIcon-upload"><text class="cuIcon-upload"></text> 圖標</button><button class="cu-btn block bg-blue margin-tb-sm lg"><text class="cuIcon-loading2 cuIconfont-spin"></text> 加載</button><button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加載</button> </view>按鈕相關class
| cu-btn | 按鈕必選值 | —— |
| round | 圓角按鈕 | —— |
| cuIcon | 圓形 | —— |
| sm | 小尺寸按鈕 | —— |
| lg | 大尺寸按鈕 | —— |
| line-{{color}} | 幽靈按鈕，細邊框 | 參考背景色 |
| lines-{{color}} | 幽靈按鈕，粗邊框 | 參考背景色 |
| disabled | 禁用 | —— |
Tag標簽
標簽必選class cu-tag?
標簽形狀
通過添加class名設置標簽不同形狀，默認只需要添加cu-tag，round為橢圓，radius為圓角
<view class="padding bg-white solid-bottom"><view class='cu-tag'>默認</view><view class='cu-tag round'>橢圓</view><view class='cu-tag radius'>圓角</view> </view>?標簽尺寸
sm小尺寸
<view class="padding bg-white"><view class='cu-tag radius sm'>小尺寸</view><view class='cu-tag radius'>普通尺寸</view> </view>?標簽顏色
添加背景class名就可以，用法參考背景組件的介紹
<view class='padding-sm flex flex-wrap'><view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'"><view class='cu-tag' :class="'bg-' + item.name">{{item.title}}</view></view><view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray' && item.name!='black' && item.name!='white'"><view class='cu-tag light' :class="'bg-' + item.name">{{item.title}}</view></view> </view>幽靈標簽
通過line-{{color}}設置鏤空的幽靈按鈕
<view class='padding-sm flex flex-wrap'><view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'"><view class='cu-tag' :class="'line-' + item.name">{{item.title}}</view></view> </view>膠囊樣式
通過cu-capsule設置為膠囊樣式，內部設置自己想要的樣式
<view class="padding"><view class="cu-capsule"><view class='cu-tag bg-red'><text class='cuIcon-likefill'></text></view><view class="cu-tag line-red">12</view></view><view class="cu-capsule round"><view class='cu-tag bg-blue '><text class='cuIcon-likefill'></text></view><view class="cu-tag line-blue">23</view></view><view class="cu-capsule round"><view class='cu-tag bg-blue '>說明</view><view class="cu-tag line-blue">123</view></view><view class="cu-capsule radius"><view class='cu-tag bg-grey '><text class='cuIcon-likefill'></text></view><view class="cu-tag line-grey">23</view></view><view class="cu-capsule radius"><view class='cu-tag bg-brown sm'><text class='cuIcon-likefill'></text></view><view class="cu-tag line-brown sm">23</view></view> </view>數字標簽
?通過badge設置角標
?
<view class="padding flex justify-between align-center"><view class='cu-avatar xl radius'>港<view class="cu-tag badge">99+</view></view><view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"><view class='cu-tag badge'>9</view></view><view class='cu-avatar xl radius'><view class='cu-tag badge'>99</view><text class='cuIcon-people'></text></view><view class='cu-avatar xl radius'><view class='cu-tag badge'>99+</view></view> </view>標簽相關class
| cu-tag | 標簽必選值 | —— |
| round | 橢圓 | —— |
| radius | 圓角 | —— |
| sm | 小尺寸標簽 | —— |
| line-{{color}} | 幽靈標簽 | 參考背景色 |
| cu-capsule | 膠囊標簽 | —— |
| badge | 數字角標 | —— |
Avatar頭像
頭像必選class?cu-avatar
頭像形狀
通過round和radius設置頭像形狀
<view class="padding"><view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view><view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> </view>頭像尺寸
通過sm 、lg、xl設置不同大小的頭像
<view class="padding"><view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view><view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view><view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view><view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view> </view> <view class="padding"><view class="cu-avatar sm round margin-left bg-red"> 蔚</view><view class="cu-avatar round margin-left bg-red">藍</view><view class="cu-avatar lg round margin-left bg-red"><text>wl</text></view><view class="cu-avatar xl round margin-left bg-red"><text class="avatar-text">網絡</text></view> </view>內嵌文字
頭像內部不僅僅是圖片，也可以是自定義文字和圖標等
<view class="padding"><view class="cu-avatar radius"><text class="cuIcon-people"></text></view><view class="cu-avatar radius margin-left"><text>港</text></view> </view>?頭像顏色
設置背景色即可
<view class="padding-sm"><view class="cu-avatar round lg margin-xs" :class="'bg-' + item.name" v-for="(item,index) in ColorList" :key="index"><text class="avatar-text">{{item.name}}</text></view> </view>?頭像組
設置了cu-avatar外部的盒子添加cu-avatar-group的class
<view class="padding"><view class="cu-avatar-group"><view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view></view> </view>頭像標簽
在頭像標簽內部添加數字標簽的角標即可
<view class="padding"><view class="cu-avatar round lg margin-left" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"><view class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view></view> </view>頭像相關class
| cu-avatar | 頭像必選值 | —— |
| cu-avatar-group | 頭像組，包裹cu-avatar | —— |
| round | 圓形 | —— |
| radius | 圓角 | —— |
| sm | 小尺寸頭像 | —— |
| lg | 大尺寸頭像 | —— |
| xl | 超大尺寸頭像 | —— |
Progress進度條?
進度條必須值為cu-progress
進度條形狀
進度條默認為方形，radius為圓角，round為圓形；代碼中loading只是一個變量，初始值為false，頁面初始化時賦值為true，即給進度條賦值，使進度條有一個動畫效果。
<view class="padding bg-white"><view class="cu-progress"><view class="bg-red" style="width:61.8%">61.8%</view></view><view class="cu-progress radius margin-top"><view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view></view><view class="cu-progress round margin-top"><view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view></view> </view>進度條尺寸
sm為小尺寸，xs為超小尺寸?
<view class="padding bg-white"><view class="cu-progress round"><view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view></view><view class="cu-progress round margin-top sm"><view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view></view><view class="cu-progress round margin-top xs"><view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view></view> </view>?進度條顏色
添加背景色即可
<view class="padding" :class="color=='white'?'bg-grey':'bg-white'"><view class="cu-progress round"><view :class="'bg-' + color" :style="[{ width:loading?'61.8%':''}]"></view></view> </view>進度條條紋
添加striped設置條紋樣式，active設置條紋動態效果
<view class="padding bg-white"><view class="cu-progress round sm striped active" ><view class="bg-green" :style="[{ width:loading?'60%':''}]"></view></view><view class="cu-progress round sm margin-top-sm striped" ><view class="bg-black" :style="[{ width:loading?'40%':''}]"></view></view> </view>進度條比例
在給定class為cu-progress的標簽內按需放置元素并進行分段設計即可
<view class="padding bg-white"><view class="cu-progress radius striped active"><view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view><view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view><view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view></view> </view>進度條布局
結合布局、圖標等內容，可根據個人所需可以設置不同進度顯示的樣式
<view class="padding bg-white "><view class="flex"><view class="cu-progress round"><view class="bg-green" :style="[{ width:loading?'100%':''}]"></view></view><text class="cuIcon-roundcheckfill text-green margin-left-sm"></text></view><view class="flex margin-top"><view class="cu-progress round"><view class="bg-green" :style="[{ width:loading?'80%':''}]"></view></view><text class="margin-left">80%</text></view> </view>?進度條相關class
| cu-progress | 進度條必選值 | —— |
| radius | 圓角 | —— |
| round? | 圓形 | —— |
| sm | 小尺寸 | —— |
| xs | 超小尺寸 | —— |
| striped | 條紋 | —— |
| active? | 結合striped使用，設置動態條紋效果 | —— |
Border&Shadow邊框陰影?
默認shadow是根據背景色設置的陰影，shadow-lg為長陰影，但是我肉眼沒看出來二者的區別，真是在下愚鈍，shadow-warp為翹邊陰影（在下愚鈍，它翹一點？？？），shadow-blur根據背景圖片設置的陰影，有點意思，挺好。關于邊框border沒什么好展開的，直接看下面表格class說明就好。
<view class="padding text-center"><view class="padding-xl radius shadow bg-white">默認陰影</view><view class="padding-xl radius shadow bg-gradual-red margin-top">根據背景顏色而改變的陰影</view><view class="padding-xl radius shadow shadow-lg bg-white margin-top">長陰影</view><view class="padding-xl radius shadow shadow-lg bg-blue margin-top">長陰影</view><view class="padding-xl radius shadow-warp bg-white margin-top">翹邊陰影</view><view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);"><view>根據背景圖而改變的陰影</view></view> </view>?邊框陰影相關class
| solid/solids | 實線四周邊框，solid為細邊框 ，solids為粗邊框 | —— |
| solid/solids-{{options}} | 不同方向的邊框(上下左右) | top/right/bottom/left |
| shadow | 默認陰影（根據背景色變化） | —— |
| shadow-lg | 長陰影 | —— |
| shadow-wrap | 翹邊陰影 | —— |
| shadow-blur | 根據背景圖片變化的陰影 | ? |
Loading加載
加載必選值cu-load
加載狀態
loading正在加載中，over加載完成，erro加載失敗
<view class="cu-load bg-blue loading"></view> <view class="cu-load bg-blue over"></view> <view class="cu-load bg-red erro"></view>彈框加載
設置按鈕，彈出彈框，顯示加載狀態，彈框模板設置load-modal
<view class="cu-bar bg-white margin-top"><view class="action"><text class="cuIcon-title text-blue"></text>彈框加載</view><view class="action"><button class="cu-btn bg-green shadow" @tap="LoadModal">點我</button></view> </view> <view class="cu-load load-modal" v-if="loadModal"><image src="/static/logo.png" mode="aspectFit"></image><view class="gray-text">加載中...</view> </view><script>export default {data() {return {loadModal: false};},methods: {LoadModal(e) {this.loadModal = true;setTimeout(() => {this.loadModal = false;}, 2000)}}} </script>?進度條加載
設置進度條加載時需要添加load-progress，變量loadProgress為加載進度條的進度，load-progress-bar代表加載中進度條樣式，load-progress-spinner代表加載中旋轉的圓圈樣式
<view class="action"><button class="cu-btn bg-green shadow" @tap="LoadProgress">點我</button> </view> <view class="load-progress" :class="loadProgress!=0?'show':'hide'" style="top:100px"><view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view><view class="load-progress-spinner text-green"></view> </view><script>export default{data(){return{loadProgress:0}},methods:{LoadProgress(e) {this.loadProgress = this.loadProgress + 3;if (this.loadProgress < 100) {setTimeout(() => {this.LoadProgress();}, 100)} else {this.loadProgress = 0;}}}} </script>加載相關class
| cu-load | 加載必選值（除了進度條加載） | —— |
| loading | 加載中 | —— |
| over | 加載完成 | —— |
| erro | 加載失敗 | —— |
| load-modal | 彈框加載 | —— |
| load-progress | 設置進度條加載 | —— |
| load-progress-bar | 進度條加載樣式 | —— |
| load-progress-spinner | 旋轉加載樣式 | —— |
| hide | 隱藏 | —— |
| show | 顯示 | —— |
交互組件
這篇博客太長了，交互組件的介紹就另寫一篇吧，ColorUI組件庫簡易教程之交互組件
這只是個人的理解寫的，有什么不足，望大佬指教，及時更正！
總結
以上是生活随笔為你收集整理的小程序ColorUI使用简易教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++学习基础篇 —— 引用（）的用法和
- 下一篇： extjs 文件加载、解析流程