TMUI4x(鸿蒙Next)

Appearance

TMUI4x2026-02-01
468
2m

圆形进度环 xCircleProgress ​

在线预览
在线模拟尺寸:

介绍 ​

样式灵活多变。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-circle-progress/x-circle-progress.uvue

使用 ​

ts

<x-circle-progress></x-circle-progress>

Props 属性 ​

名称说明类型默认值
size可以是px,rpx,纯数字符串。默认以rpx为单位。
string"60"
lineWidth可以是px,rpx,纯数字符串。默认以rpx为单位。
string"3"
startAngle起始角度，默认是0，正上方顺时针
number0
color圆环背景颜色,暗黑时取inputDarkColor
string"info"
activeColor当前激活的进度颜色，空值读取全局值。
string""
modelValue当前的值,以百分比为值0-100
等同v-model=""
您直接:model-value="xx"也是一样可以改变值。
number30
labelFontSize中间文本字号
string"16"
labelUnit数字的单位。
string"%"
showLabel是否显示中间文本。
booleanfalse
labelColor中间文本的颜色。
string"#333333"
darkLabelColor中间文本的暗黑颜色。空值是取白色
string""
duration进度条动画的时间,单位ms。
请不要设置的过慢，否则会有停顿感。
number300
linearColor渐变背景，使用使用正经的background-image请查阅官方文档,例：'linear-gradient(to bottom,red,green)'
仅支持小程序和web，app不支持（原因 是canvas对渐变色的动画频繁绘制及canvas性能不行，app不是采用canvas，而是采用原生view绘制所以性能强）
string""

Events 事件 ​

名称参数说明

Slots 插槽 ​

名称说明数据
default默认文本插槽current: number

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/circle-progress

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">圆形进度环 xCircleProgress</x-text>
			<x-text  color="#999999" >样式灵活多变。性能好。</x-text>
		</x-sheet>
		<x-sheet>
			<view class="flex flex-row flex-row-center-center">
				<x-circle-progress :model-value="testValue"></x-circle-progress>
				<x-circle-progress lineWidth="6" activeColor="success" linear-color="linear-gradient(to right, #FFEB3A, #4DEF8E)" class="mx-16"
					:model-value="testValue"></x-circle-progress>
				<x-circle-progress class="mr-32" lineWidth="10" color="error" activeColor="danger"
					:model-value="testValue"></x-circle-progress>
					<x-circle-progress activeColor="warn" :model-value="testValue"></x-circle-progress>
			</view>
			<view class="flex flex-row mt-32  flex-row-center-center">
				<x-button @click="add">增加</x-button>
				<x-button color="error" class="mx-16" @click="sur">减少</x-button>
			</view>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">设置起始角度</x-text>
		</x-sheet>
		<x-sheet>
			<view class="flex flex-row flex-row-center-center">
				<x-circle-progress :start-angle="-90" lineWidth="20" size="100" :show-label="true"
					:model-value="testValue"></x-circle-progress>
				<x-circle-progress :start-angle="90" lineWidth="20" class="ml-32" size="100" :show-label="true" color="error"
					activeColor="danger" :model-value="testValue"></x-circle-progress>
			</view>
		
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">尺寸，显示文本</x-text>
		</x-sheet>
		<x-sheet>
			<view class="flex flex-row flex-row-center-center">
				<x-circle-progress lineWidth="20" size="100" :show-label="true"
					:model-value="testValue"></x-circle-progress>
				<x-circle-progress lineWidth="20" class="ml-32" size="100" :show-label="true" color="error"
					activeColor="danger" :model-value="testValue"></x-circle-progress>
			</view>

		</x-sheet>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	const testValue = ref(50)
	const add = () => {
		let abs = testValue.value + 10;
		if (abs > 100) {
			abs = 100
		}
		testValue.value = abs
	}
	const sur = () => {
		let abs = testValue.value - 10;
		if (abs < 0) {
			abs = 0
		}
		testValue.value = abs
	}
</script>

<style lang="scss">

</style>
最近更新