uni-ui

@YEHUDA

已于 2023-10-31 17:19:21 修改

阅读量382

点赞数

文章标签： ui uni-app uniapp vue

于 2023-10-27 17:28:12 首次发布

本文链接：https://blog.csdn.net/m0_62425768/article/details/134080835

版权

uni-ui

简介：

uniapp扩展组件
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-ui不包括基础组件，它是基础组件的补充。

1.uni-scss辅助样式

		<view class="uni-primary">主色</view>
		<view class="uni-success">成功色</view>
		<view class="uni-warning">警告色</view>
		<view class="uni-error">错误色</view>

2.uni-badge数字角标

属性名	类型	默认值	说明
text	String	-	角标内容
type	String	default	颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)
size	String	normal	Badge 大小，可取值：normal、small
is-dot	Boolean	false	不展示数字，只有一个小点
max-num	String/Numbuer	99	展示封顶的数字值，超过 99 显示99+

		<view class="uni-primary">主色
		<uni-badge text="5" type="primary"></uni-badge>
		</view>
		
		<view class="uni-success">成功色
		<uni-badge text="5" type="success" is-dot></uni-badge>
		</view>
		
		<view class="uni-warning">警告色
		<uni-badge :text="msg" max-num="99" type="error"></uni-badge>
		</view>
		<view class="uni-error">错误色</view>

3.uni-breadcrumb面包屑

属性名	类型	默认值	说明
to	String		路由跳转页面路径

	<view>
			<uni-breadcrumb separator="//">
				<uni-breadcrumb-item v-for="item in routers" :to="item.to">
					{{item.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			
			<uni-breadcrumb separator="//">
				<uni-breadcrumb-item to="/">
					首页
				</uni-breadcrumb-item>
				<uni-breadcrumb-item to="/">
					购物车
				</uni-breadcrumb-item>
				<uni-breadcrumb-item to="#">
					待支付
				</uni-breadcrumb-item>
			</uni-breadcrumb>
	</view>


<script>
	export default {
		data() {
			return {
				routers:[
				{to:"/",name:"首页"},
				{to:"/",name:"购物车"},
				{to:"/",name:"已收藏"}
				]
			}
		},
		methods: {
			
		}
	}
</script>

4.uni-calendar日历

date	String	-	自定义当前时间，默认为今天
lunar	Boolean	false	显示农历
startDate	String	-	日期选择范围-开始日期
endDate	String	-	日期选择范围-结束日期

<view>
	<uni-calendar lunar range startDate="2023/8/22" endDate="2023/12/1">
    </uni-calendar>
</view>

5.uni-card卡片

属性名	类型	默认值	说明
title	String	-	标题文字
sub-title	String	-	副标题文字
extra	String	-	标题额外信息
thumbnail	String	-	标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，
cover	String	-	封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，
is-full	Boolean	false	卡片内容是否通栏，为true时将去除padding值

    <view>
	   <uni-card v-for="data in datas"
				  :title="data.title"
				  :subTitle="data.subTitle" 
				  :extra="data.extra" 
				  :thumbnail="data.thumbnail"
				  isFull="true"
                  @click="show()">
				  {{data.content}}
		</uni-card>
	</view>
	
	<script>
	export default {
		data() {
			return {
				datas:[
					{
						title:"版本更新1",
						extra:"额外信息1",
						subTitle:"副标1",
						thumbnail:"../../../static/c1.png",
						content:"1.0版本更新了扩张组件"
					},
					{
						title:"版本更新2",
						extra:"额外信息2",
						subTitle:"副标题2",
						thumbnail:"../../../static/c2.png",
						content:"2.0版本更新了扩张组件"
					}
				]
			}
		},
		methods: {
			show(){
				uni.showModal({
					content:"点击显示弹框",
					showCancel:false
				})
			}
		}
	}
</script>

6.uni-collapse折叠面板

属性名	类型	默认值	说明
title	String	-	标题文字
thumb	String	-	标题左侧缩略图

<view>
	<uni-collapse>
		<uni-collapse-item v-for="data in datas"
							title="标题文件"
							thumb="../../../static/c1.png">
			<uni-card :title="data.title"
					  :subTitle="data.subTitle" 
					  :extra="data.extra" 
					  :thumbnail="data.thumbnail"
					  isFull="true">
					  {{data.content}}
			</uni-card>
		</uni-collapse-item>
	</uni-collapse>
</view> 


<script>
	export default {
		data() {
			return {
				datas:[
					{
						title:"版本更新1",
						extra:"额外信息1",
						subTitle:"副标1",
						thumbnail:"../../../static/c1.png",
						content:"1.0版本更新了扩张组件"
					},
					{
						title:"版本更新2",
						extra:"额外信息2",
						subTitle:"副标题2",
						thumbnail:"../../../static/c2.png",
						content:"2.0版本更新了扩张组件"
					}
				]
			}
		},
		methods: {
	
		}
	}
</script>

7.uni-combox组合框

属性名	类型	默认值	说明
label	String	-	标签文字

<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>

8…uni-countdown倒计时

属性名	类型	默认值	说明
backgroundColor	String	#FFFFFF	背景色
color	String	#000000	文字颜色
splitorColor	String	#000000	分割符号颜色
day	Number	0	天数
hour	Number	0	小时
minute	Number	0	分钟
second	Number	0	秒
showDay	Boolean	true	是否显示天数
showColon	Boolean	true	是否以冒号为分隔符
start	Boolean	true	是否初始化组件后就开始倒计时

<view>	
	<!-- 倒计时 -->
	<uni-countdown :day="0" :hour="0" :minute="0" :second="10"
					backgroundColor="red"
					:start="start"
					@timeup="timeup()">
	</uni-countdown>	
	<button uni-btn uni-error @click="start=true">开始</button>
	<button uni-btn uni-error @click="start=false">停止</button>
</view>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			timeup(){
				uni.showModal({
					content:"倒计时结束!",
					showCancel:false
                    //弹出警示框
				})
			}
		}
	}
</script>

9.uni-data-checkbo数据选择器

属性名	类型	可选值	默认值	说明
value/v-model	Array/String/Number	-	-	默认值，multiple=true时为 Array类型，否则为 String或Number类型
localdata	Array	-	-	本地渲染数据
mode	String	default/list/button/tag	default	显示模式
multiple	Boolean	-	false	是否多选
min	String/Number	-	-	最小选择个数，multiple为true时生效
max	String/Number	-	-	最大选择个数，multiple为true时生效

<view>
	<view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
	<uni-data-checkbox :multiple="true"
					   :localdata="checkdatas"
					   mode="tag"
					   min="1"
					   max="3"
					   v-model="checkbox1">
	</uni-data-checkbox>
</view>

<script>
	export default {
		data() {
			return {
				checkbox1:[0]
			}
		},
		methods: {

		}
	}
</script>

10.uni-nav-bar导航栏

title	String	-	标题文字
leftText	String	-	左侧按钮文本
rightText	String	-	右侧按钮文本
leftIcon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
rightIcon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
color	String	#000000	图标和文字颜色
backgroundColor	String	#FFFFFF	导航栏背景颜色
dark	Boolean	false	导航栏开启暗黑模式

<template>
	<view>
		<uni-nav-bar title="头部导航栏" 
					 leftText="左侧文本" leftIcon="arrow-left"
					  rightIcon="arrow-right" rightText="右侧文本"
					  shadow="true" dark>
		</uni-nav-bar>
	</view>
</template>

11.uni-icons图标

属性名	类型	默认值	说明
size	Number	24	图标大小
type	String	-	图标图案，参考示例
color	String	-	图标颜色
customPrefix	String	-	自定义图标

<template>
		点赞<uni-icons :type="dianzan" :color="dzcolor" size="28" @click="dian01()"></uni-icons><br>
		转发<uni-icons :type="zhuangfa" :color="zfcolor" size="28" @click="dian02()"></uni-icons><br>
		收藏<uni-icons :type="shoucang" :color="sccolor" size="28" @click="dian03()"></uni-icons>
	</view>
</template>

12.uni-rate评分

Rate Props

属性名	类型	默认值	说明
value/v-model	Number	0	当前评分
color	String	#ececec	未选中状态的星星颜色
activeColor	String	#ffca3e	选中状态的星星颜色
disabledColor	String	#c0c0c0	禁用状态的星星颜色
size	Number	24	星星的大小
max	Number	5	最大评分评分数量，目前一分一颗星
margin	Number	0	星星的间距，单位 px
isFill	Boolean	true	星星的类型，是否为实心类型
disabled	Boolean	false	是否为禁用状态 (之前版本为已读状态，现更正为禁用状态)
readonly	Boolean	false	是否为只读状态
allowHalf	Boolean	false	是否展示半星
touchable	Boolean	true	是否支持滑动手势

<template>
	<view>
		评价
		<uni-rate color="black" activeColor="yellow" :touchable="false" allowHalf="true" size="38"></uni-rate>
	</view>
</template>


<script>
	export default {
		data() {
			return {//放一行
				dianzan:"hand-up",
				zhuangfa:"undo",
				shoucang:"star",
				dzcolor:"black",
				sccolor:"black",
				zfcolor:"black",
				dzcountents:1
			}
		},
		methods: {
			// let c=dzcountents;
			dian01(){
				if(this.dianzan=="hand-up"){
					this.dianzan="hand-up-filled",
					this.dzcolor="red"
					// dzcountents++
				}else{
					this.dianzan="hand-up",
					this.dzcolor="black"
				}
				
			// uni.showModal({
			// 	content:"已点赞"+c+"次",
			// 	showCancel:false
			// })
				
			},
			dian02(){
					if(this.zhuangfa=="undo"){
					this.zhuangfa="undo-filled",
					this.zfcolor="red"
				}else{
					this.zhuangfa="undo",
					this.zfcolor="black"
				}
			},
			dian03(){
				if(this.shoucang=="star"){
					this.shoucang="star-filled",
					this.sccolor="red"
				}else{
					this.shoucang="star",
					this.sccolor="black"
				}
				
			}

		}
	}
</script>

自定义评分图标：项目中uni_modules–>uni-rate–>components–>uni-rate–>uni-rate.vue,用uni-icons图标替换图中词

在这里插入图片描述

13.unisteps步骤条

Steps Props

属性名	类型	可选值	默认值	说明
active	Number	-	0	当前步骤
direction	String	row/column	row	排列方向
active-color	String	-	#1aad19	选中状态的颜色
options	Array	-	-	数据源，格式为：[{title:‘xxx’,desc:‘xxx’},{title:‘xxx’,desc:‘xxx’}]

<template>
	<view>
		<uni-steps :options="steps" :active="1"></uni-steps>
		<uni-steps :options="columnsteps" :active="1" direction="column"></uni-steps>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				steps:[
					{title:"第一步"},
					{title:"第二步"},
					{title:"第三步"},
					{title:"第四步"},
					{title:"第五步"}
				],
				columnsteps:[
					{title:"第一步",desc:"下单成功2023/10/15"},
					{title:"第二步",desc:"待支付2023/10/16"},
					{title:"第三步",desc:"支付成功2023/10/17"},
					{title:"第四步",desc:"物流发货2023/10/18"},
					{title:"第五步",desc:"签收2023/10/19"}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

14.navigator路由与页面跳转

<template>
	<view>
		<uni-icons type="undo" size="28" @click="jump()"></uni-icons>
		<navigator class="uni-primary" url="../uni-ui05/uni-ui05" open-type="navigate">
			跳转到uniapp05页面
		</navigator>
		<navigator class="uni-primary" url="../uni-ui04/uni-ui04" open-type="redirect">跳转到uni-ui04页面</navigator>
		<navigator class="uni-primary" url="../uni-ui03/uni-ui03" open-type="switchTab">跳转到uni-ui03页面</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			jump(){
				uni.navigateTo({
					url:"../uni-ui05/uni-ui05"
				})
			}
		}
	}
</script>

<style>

</style>