圆形进度环 xCircleProgress

---

预览

介绍

全端 x-skia-u 绘制圆环进度，不要官方 canvas。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

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

使用

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

Props 属性

名称	说明	类型	默认值
size	可以是px,rpx,纯数字符串。带 rpx 才换算，否则按 px	string	"60"
lineWidth	可以是px,rpx,纯数字符串。带 rpx 才换算，否则按 px	string	"3"
startAngle	起始角度，默认是0，正上方顺时针	number	0
color	圆环背景颜色,暗黑时取inputDarkColor	string	"info"
activeColor	当前激活的进度颜色，空值读取全局值。	string	""
modelValue	当前的值,以百分比为值0-100，等同 v-model	number	30
labelFontSize	中间文本字号	string	"16"
labelUnit	数字的单位。	string	"%"
showLabel	是否显示中间文本。	boolean	false
labelColor	中间文本的颜色。	string	"#333333"
darkLabelColor	中间文本的暗黑颜色。空值是取白色	string	""
duration	进度条动画的时间,单位ms。	number	300
linearColor	进度渐变，如 linear-gradient(to right, #FFEB3A, #4DEF8E)，全端有效	string	""

Events 事件

名称	参数	说明

Slots 插槽

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

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/zhanshi/circle-progress

示例源码

uvue

<template>
	<!-- #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-skia-u 绘制，渐变各端可用。</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 pb-8">
				<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>

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