uni组件ColorUI手册

最新推荐文章于 2024-07-10 22:20:08 发布
最新推荐文章于 2024-07-10 22:20:08 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38322982/article/details/117920629
版权

ColorUI手册

本文根据ColorUI使用文档修改
本文仅用于个人学习记录整理

文字

使用

<view class="text-xsl">特大</view>

样式

.text-xs {font-size: 20rpx;}
.text-sm {font-size: 24rpx;}
.text-df {font-size: 28rpx;}
.text-lg {font-size: 32rpx;}
.text-xl {font-size: 36rpx;}
.text-xxl {font-size: 44rpx;}
.text-sl {font-size: 80rpx;}
.text-xsl {font-size: 120rpx;}
.text-cut {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.text-bold {font-weight: bold;}
.text-center {text-align: center;}

颜色样式

使用

<view class="text-xs text-red">小</view>

样式

--red(红色): #e54d42;
--orange(橙色): #f37b1d;
--yellow(黄色): #fbbd08;
--olive(橄榄): #8dc63f;
--green(绿色): #39b54a;
--cyan(青色): #1cbbb4;
--blue(蓝色): #0081ff;
--purple(紫色): #6739b6;
--mauve(紫红色): #9c26b0;
--pink(粉红色): #e03997;
--brown(棕色): #a5673f;
--grey(灰色): #8799a3;
--black(黑色): #333333;
--darkGray(深灰色): #666666;
--gray(灰色): #aaaaaa;
--ghostWhite(鬼白色): #f1f1f1;
--white(白色): #ffffff;
/* 浅色 */
--redLight(浅红色): #fadbd9;
--orangeLight(浅橙色): #fde6d2;
--yellowLight(浅黄色): #fef2ce;
--oliveLight(浅橄榄色): #e8f4d9;
--greenLight(浅绿色): #d7f0db;
--cyanLight(浅青色): #d2f1f0;
--blueLight(浅蓝色): #cce6ff;
--purpleLight(浅紫色): #e1d7f0;
--mauveLight(浅紫红色): #ebd4ef;
--pinkLight(浅粉红色): #f9d7ea;
--brownLight(浅棕色): #ede1d9;
--greyLight(浅灰色): #e7ebed;
/* 渐变色 */
--gradualRed(渐变红): linear-gradient(45deg, #f43f3b, #ec008c);
--gradualOrange(渐变橙): linear-gradient(45deg, #ff9700, #ed1c24);
--gradualGreen(渐变绿): linear-gradient(45deg, #39b54a, #8dc63f);
--gradualPurple(渐变紫): linear-gradient(45deg, #9000ff, #5e00ff);

布局

使用

<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">sub(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>

样式

xs:10rpx;sm:20rpx;默认df:30rpx;lg:40rpx;xl:50rpx;

/* -- flex弹性布局 -- */
.flex {display: flex;}
.basis-xs {flex-basis: 20%;}
.basis-sm {flex-basis: 40%;}
.basis-df {flex-basis: 50%;}
.basis-lg {flex-basis: 60%;}
.basis-xl {flex-basis: 80%;}
.flex-sub {flex: 1;}
.flex-twice {flex: 2;}
.flex-treble {flex: 3;}
.flex-direction {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-center {align-items: center;}
.align-stretch {align-items: stretch;}
.self-start {align-self: flex-start;}
.self-center {align-self: flex-center;}
.self-end {align-self: flex-end;}
.self-stretch {align-self: stretch;}
.align-stretch {align-items: stretch;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
/* grid布局 */
.grid {display: flex;flex-wrap: wrap;}
.grid.grid-square {overflow: hidden;}
.grid.grid-square .cu-tag {position: absolute;right: 0;top: 0;border-bottom-left-radius: 6rpx;padding: 6rpx 12rpx;height: auto;background-color: rgba(0, 0, 0, 0.5);}
.grid.grid-square>view>text[class*="cuIcon-"] {font-size: 52rpx;position: absolute;color: var(--grey);margin: auto;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.grid.grid-square>view {margin-right: 20rpx;margin-bottom: 20rpx;border-radius: 6rpx;position: relative;overflow: hidden;}
.grid.grid-square>view.bg-img image {width: 100%;height: 100%;position: absolute;}
.grid.col-1.grid-square>view {padding-bottom: 100%;height: 0;margin-right: 0;}
.grid.col-2.grid-square>view {padding-bottom: calc((100% - 20rpx)/2);height: 0;width: calc((100% - 20rpx)/2);}
.grid.col-3.grid-square>view {padding-bottom: calc((100% - 40rpx)/3);height: 0;width: calc((100% - 40rpx)/3);}
.grid.col-4.grid-square>view {padding-bottom: calc((100% - 60rpx)/4);height: 0;width: calc((100% - 60rpx)/4);}
.grid.col-5.grid-square>view {padding-bottom: calc((100% - 80rpx)/5);height: 0;width: calc((100% - 80rpx)/5);}
.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n){margin-right: 0;}
.grid.col-1>view {width: 100%;}
.grid.col-2>view {width: 50%;}
.grid.col-3>view {width: 33.33%;}
.grid.col-4>view {width: 25%;}
.grid.col-5>view {width: 20%;}
/* -- 内外边距 -- */
.margin-0 {margin: 0;}
.margin-xs {margin: 10rpx;}
.margin-sm {margin: 20rpx;}
.margin {margin: 30rpx;}
.margin-lg {margin: 40rpx;}
.margin-xl {margin: 50rpx;}
.margin-top-xs {margin-top: 10rpx;}
.margin-top-sm {margin-top: 20rpx;}
.margin-top {margin-top: 30rpx;}
.margin-top-lg {margin-top: 40rpx;}
.margin-top-xl {margin-top: 50rpx;}
.margin-right-xs {margin-right: 10rpx;}
.margin-right-sm {margin-right: 20rpx;}
.margin-right {margin-right: 30rpx;}
.margin-right-lg {margin-right: 40rpx;}
.margin-right-xl {margin-right: 50rpx;}
.margin-bottom-xs {margin-bottom: 10rpx;}
.margin-bottom-sm {margin-bottom: 20rpx;}
.margin-bottom {margin-bottom: 30rpx;}
.margin-bottom-lg {margin-bottom: 40rpx;}
.margin-bottom-xl {margin-bottom: 50rpx;}
.margin-left-xs {margin-left: 10rpx;}
.margin-left-sm {margin-left: 20rpx;}
.margin-left {margin-left: 30rpx;}
.margin-left-lg {margin-left: 40rpx;}
.margin-left-xl {margin-left: 50rpx;}
.margin-lr-xs {margin-left: 10rpx;margin-right: 10rpx;}
.margin-lr-sm {margin-left: 20rpx;margin-right: 20rpx;}
.margin-lr {margin-left: 30rpx;margin-right: 30rpx;}
.margin-lr-lg {margin-left: 40rpx;margin-right: 40rpx;}
.margin-lr-xl {margin-left: 50rpx;margin-right: 50rpx;}
.margin-tb-xs {margin-top: 10rpx;margin-bottom: 10rpx;}
.margin-tb-sm {margin-top: 20rpx;margin-bottom: 20rpx;}
.margin-tb {margin-top: 30rpx;margin-bottom: 30rpx;}
.margin-tb-lg {margin-top: 40rpx;margin-bottom: 40rpx;}
.margin-tb-xl {margin-top: 50rpx;margin-bottom: 50rpx;}
.padding-0 {padding: 0;}
.padding-xs {padding: 10rpx;}
.padding-sm {padding: 20rpx;}
.padding {padding: 30rpx;}
.padding-lg {padding: 40rpx;}
.padding-xl {padding: 50rpx;}
.padding-top-xs {padding-top: 10rpx;}
.padding-top-sm {padding-top: 20rpx;}
.padding-top {padding-top: 30rpx;}
.padding-top-lg {padding-top: 40rpx;}
.padding-top-xl {padding-top: 50rpx;}
.padding-right-xs {padding-right: 10rpx;}
.padding-right-sm {padding-right: 20rpx;}
.padding-right {padding-right: 30rpx;}
.padding-right-lg {padding-right: 40rpx;}
.padding-right-xl {padding-right: 50rpx;}
.padding-bottom-xs {padding-bottom: 10rpx;}
.padding-bottom-sm {padding-bottom: 20rpx;}
.padding-bottom {padding-bottom: 30rpx;}
.padding-bottom-lg {padding-bottom: 40rpx;}
.padding-bottom-xl {padding-bottom: 50rpx;}
.padding-left-xs {padding-left: 10rpx;}
.padding-left-sm {padding-left: 20rpx;}
.padding-left {padding-left: 30rpx;}
.padding-left-lg {padding-left: 40rpx;}
.padding-left-xl {padding-left: 50rpx;}
.padding-lr-xs {padding-left: 10rpx;padding-right: 10rpx;}
.padding-lr-sm {padding-left: 20rpx;padding-right: 20rpx;}
.padding-lr {padding-left: 30rpx;padding-right: 30rpx;}
.padding-lr-lg {padding-left: 40rpx;padding-right: 40rpx;}
.padding-lr-xl {padding-left: 50rpx;padding-right: 50rpx;}
.padding-tb-xs {padding-top: 10rpx;padding-bottom: 10rpx;}
.padding-tb-sm {padding-top: 20rpx;padding-bottom: 20rpx;}
.padding-tb {padding-top: 30rpx;padding-bottom: 30rpx;}
.padding-tb-lg {padding-top: 40rpx;padding-bottom: 40rpx;}
.padding-tb-xl {padding-top: 50rpx;padding-bottom: 50rpx;}

按钮

按钮属性
cu-btn
加圆：round
大小：sm lg
背景颜色：bg-red
镂空：line-red
块状:``

<button class="cu-btn bg-red margin-tb-sm lg">块状</button>

按钮加图标:

<button class="cu-btn block margin-tb-sm line-orange  lg"><text class="cuIcon-upload"></text>图标</button>

标签

cuIcon-title是圆形 cuIcon-titles是竖线
蓝点加标题文字

<view class="action"> 
	<text class="cuIcon-title text-blue"></text>标签形状 
</view>

竖线加标题文字

<view class="action"> 
	<text class="cuIcon-titles text-orange"></text> 默认 </view> 
</view>

按钮属性cu-tag
加圆：round
大小：sm lg
背景颜色：bg-red
镂空：line-red
右上角徽章：cu-tag badge
胶囊图标样式

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

阴影

shadow
翘边阴影：shadow-warp
长阴影： shadow-blur
使用

<view class="padding-xl radius shadow shadow-lg bg-blue 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>

模态框

普通带x模态框

<template>
	<view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 普通窗口
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">Modal标题</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				modalName: null,
			};
		},
		methods: {
		showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

支付多选模态框

<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal"> 
	<view class="cu-dialog" catchtap> 
		<view class="cu-bar bg-white">
			<view class="action text-blue" bindtap="hideModal">取消</view> 
			<view class="action text-green" bindtap="hideModal">确定</view> 
		</view> 
		<view class="grid col-3 padding-sm"> 
			<view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}"> 
				<button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}} 
					<view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view> 
				</button> 
			</view> 
		</view> 
	</view>
</view>

轮播图

卡片式轮播图

<template>
	<view>
		<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
			<swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}"> 
				<view class="swiper-item">
					<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
					<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [
				{id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'}, 
				{id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg'}, 
				{id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
				{id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'},
				{id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'},
				{id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'},
				{id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}],
				dotStyle: false,
			};
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

导航栏

tab中有图标

<template>
	<view>
		<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0"><text class="cuIcon-camerafill"></text> 数码</view>
		<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1"><text class="cuIcon-upstagefill"></text> 排行榜</view>
		<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2"><text class="cuIcon-clothesfill"></text> 皮肤</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

表单

<form>
	<view class="cu-form-group margin-top"> 
		<view class="title">邮件</view> 
		<input placeholder="短标题"></input> 
	</view>
	
	<view class="cu-form-group"> 
		<view class="title">验证码</view> 
		<input placeholder="输入框带个按钮"></input>
		<button class="cu-btn bg-green shadow">验证码</button> 
	</view>
	<view class="cu-bar bg-white margin-top"> 
		<view class="action"> 图片上传 </view>
		<view class="action"> {{imgList.length}}/4 </view> 
	</view> 
	<view class="cu-form-group"> 
		<view class="grid col-4 grid-square flex-sub"> 
			<view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}"> 
				<image src='{{imgList[index]}}' mode='aspectFill'></image> 
				<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}"> 
				<text class="cuIcon-close"></text> 
			</view> 
		</view> 
		<view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}"> 
			<text class="cuIcon-cameraadd"></text> 
		</view> 
	</view>
	
	<view class="cu-form-group margin-top"> 
	<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="多行文本输入框></textarea> 
	</view> 
	<view class="cu-form-group align-start"> 
		<view class="title">文本框</view> 
		<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaBInput" placeholder="多行文本输入框"></textarea> 
	</view>
</form>

辅助样式

实线

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left

2.虚线

dashed
lessmker
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序 ColorUI uni-app UI组件
02-12
ColorUI 是一款专为小程序和uni-app设计的高效、美观的UI组件库，它的核心在于提供一套简洁明了、易于使用的CSS样式库，帮助开发者快速构建出具有统一风格和良好用户体验的移动端应用。在开发过程中，通过引入Color...
基于uni-app和colorUI开发H5初始模板
12-22
【基于uni-app和colorUI开发H5初始模板】是一个实用的项目模板，旨在为开发者提供一个快速搭建H5页面的基础框架。这个模板充分利用了uni-app的跨平台特性，结合colorUI的优雅设计，使得开发者可以高效地构建出美观且...
ColorUI组件库简易教程之交互组件
热门推荐
仗剑东游的猫
11-15 3万+
官方示例在此！！！官方示例在此！！！官方示例在此！！！ 这主要是基于uni-app开发的，所以，请多看uni-app文档，了解一些标签、属性，可以更好的使用该组件 目录 交互组件 Bar操作条 Nav导航栏 List列表 Card卡片 Form表单 TimeLine时间轴 Chat聊天 Swiper轮播图 Modal模态框 Steps步骤条 扩展插件 交互组件...
uView、ColorUI与Vant框架的深入分析与案例实践
最新发布
chenchuang0128的博客
07-10 698
在未来的移动开发中，我们将继续探索更多优秀的框架和技术，为项目的成功提供有力支持。虽然ColorUI的组件数量有限，但我们通过组合使用已有的组件和自定义样式，成功实现了产品的UI设计。通过利用uView丰富的组件库和强大的自定义能力，我们快速搭建了风格统一的页面，并实现了个性化需求。在开发一款移动商城应用时，我们选择了Vant框架。同时，通过结合其他工具和库，我们也实现了对Vant的定制和扩展，满足了项目的特殊需求。组件丰富：uView提供了大量高质量的组件，涵盖了常见的UI元素，减少了开发者的开发时间。
ColorUI使用与技巧
Linlietao0587的博客
12-23 1万+
1 ColorUI学习 1.1 准备 引入资源 demo中的colorui – app.wxss @import '/colorui/icon.wxss'; @import '/colorui/main.wxss'; 1.2 自定义导航栏 app.json 配置取消系统导航栏，并全局引入组件 "window": { "navigationBarBackgroundColor": "#39b54a", "navigationBarTitleText": "Color UI", "naviga
微信小程序自定义标签 ColorUI样式失效
qq_39426280的博客
04-08 3891
微信小程序自定义标签 ColorUI样式失效 因为使用的是ColorUI样式，所以大部分样式都没有显示。经过调试发现。 因为自定义了底部导航标签 所以产生了自定义标签。猜想是自定义标签导致引入的全局ColorUI样式失效。 直接在每一个失效wxss的文件头部添加上引入要引入的样式即可。 大功告成！！ ...
color ui
qinjinhua_的博客
07-20 1万+
ColorUI是一个css库！！！
hbuildX 开发uni-app 引入组件uni-ui
03-23
uni-ui是uni-app官方推荐的一套UI组件库，它提供了一系列预设的、符合 Material Design 设计规范的组件，涵盖了页面布局、导航、表单、反馈等常见功能。 1. 安装uni-ui：在项目根目录下，使用npm或yarn安装uni-ui：...
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
2. **color-ui**：Color UI 是一套为 uni-app 设计的轻量级、简洁易用的组件库，主要用于快速构建移动应用的UI界面。它包含了大量的预设样式和组件，如导航栏、按钮、表格、弹窗等，使得开发者能快速搭建出美观的...
uni-ui安装初始化
11-23
【uni-ui安装初始化】是关于使用uni-app框架配置并引入uni-ui组件库的主题。uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在多个平台上运行，包括H5、iOS、Android等。而uni-ui则是uni-...
ColorUI 全网最全使用文档（建议收藏）
糜家智の博客
06-18 1万+
全网最全color-ui文档
uni ui 、color ui 图标icon的使用
m0_65392968的博客
09-21 3628
uni ui中使用icon
ColorUI开发手册（适用于后端同学使用）
10-12 1万+
一、介绍 开发微信小程序的时候，使用ui会很方便。UI有很多： 微信小程序UI组件库合集 | 微信开放社区 本文选择了ColorUI，感觉是最好看的一个(如图） demo地址（可以看到有很多的组件）：ColorUI组件库 二、说明 本人只会简单的html，js，css，工作是后端开发，不会使用npm那种方式。所以本文适用与后端同学使用。 三、目录 使用文档分为以下几篇 使用ColorUI一个小程序项目 如何使用里面的组件 ......
colorUI样式笔记
Leckun的专栏
04-12 227
首先先将内容方块区域大小显示出来，然后在方块的四个角贴上你设置的半径大小的四个圆，将边角超出圆的区域隐藏，就是圆角样式的最终呈现效果。
colorui 使用iconfont图标
HiveMe_Hitech
02-10 6417
ColorUI + Iconfont ColorUI下直接用iconfont，图标会显示乱码。各们同学可以试下以下方法。 1.首先在iconfont官网下载你的图标代码，然后解压压缩包（名字一般是download.zip)，解压后可以看到文件夹里有多个文件。 下载步骤 先把需要的图标加到库，然后添加到项目,选择或创建一个项目（也可以直接下载代码） 之后点确定，进入项目页，选择下载至本地 这里请留意里面的 iconfont.ttf 2.浏览器打开网址：https://trans..
计算属性computed使用
没时间
12-23 575
计算属性：当计算属性内绑定的值改变了，内部set会自动计算改变的值（想当与这里的phoneNo） 当手机号输入超过4位数字即显示获取验证码的按钮，否则禁用 <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <view class="title"><text class="cuIcon-mobile margin-right-xs"></
uniapp集成colorUI uView2.0 Vuex
qq_44808710的博客
05-11 1252
文章目录说明新建uniapp项目集成colorUI集成uView（uniapp插件市场引入）集成Vuex另uView集中管理API 请求和响应拦截器也非常优秀 说明 由于经常要用到uniapp开发app所以每次都要重复搭建需要的模板，但是自己常用的框架就uView和colorUI。在我看来colorUi的css和布局写的不错，而uView又可以提供丰富的组件库。 资源下载地址 新建uniapp项目 集成colorUI 下载ColorUI-Uniapp 下载地址 复制ColorUI-Uniapp
ColorUI配色详情
qq_44723773的博客
06-10 462
深色 浅色
uni-ui组件如何按需引入
10-25
uni-ui组件库提供了按需引入的方式，可以根据需要只引入需要的组件，而不是全部引入。具体步骤如下： 1. 在需要使用的页面或组件中，使用import语句引入需要的组件，例如：import { uniButton } from 'uni-ui'; 2. 在页面或组件的components选项中注册引入的组件，例如：components: { uniButton } 3. 在页面或组件中使用已注册的组件，例如：<uni-button>按钮</uni-button> 这样就可以只引入需要的组件，减小项目体积，提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值