小程序ColorUI使用简易教程

最新推荐文章于 2024-06-04 10:34:32 发布

仗剑东游的猫

最新推荐文章于 2024-06-04 10:34:32 发布

阅读量6w

点赞数 85

分类专栏： ColorUI Uni-app 文章标签：组件文档 color UI 小程序教程

本文链接：https://blog.csdn.net/miao_yf/article/details/102971767

版权

本教程配合官方示例食用更佳！！！

前言

colorUI组件

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 MP
			Vue.prototype.StatusBar = e.statusBarHeight;
			if (e.platform == 'android') {
				Vue.prototype.CustomBar = e.statusBarHeight + 50;
			} else {
				Vue.prototype.CustomBar = e.statusBarHeight + 45;
			};
			// #endif
			// #ifdef MP-WEIXIN
			Vue.prototype.StatusBar = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			Vue.prototype.Custom = custom;
			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			// #endif		
			// #ifdef MP-ALIPAY
			Vue.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	''

slot块	作用
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	''

slot块	作用
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?'b

最低0.47元/天解锁文章

仗剑东游的猫

关注

85
点赞
踩
452

收藏

觉得还不错? 一键收藏
11
评论
小程序ColorUI使用简易教程

本教程配合官方示例食用更佳！！！目录前言快速上手使用UniApp开发开始使用自定义导航栏使用原生小程序开发从现有项目开始从新项目开始使用自定义导航栏组件基础元素layout布局Background背景Text文字Icon图标Button按钮Tag标签Avatar头像Progress进度条Border&S...
复制链接

扫一扫