外观
CircleProgress 圆形进度条
约 502 字大约 2 分钟
2025-10-31
展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。支持动态增加和减少进度值。
基础使用
通过 value 属性设置进度百分比,默认从 12 点钟方向开始绘制。
<un-circle-progress :value="percentage">
{{ percentage }}%
</un-circle-progress>尺寸与边框
使用 size 属性设置圆环大小,stroke-width 属性设置边框宽度。
<un-circle-progress :value="percentage" :size="60" :stroke-width="5">
{{ percentage }}%
</un-circle-progress>逆时针绘制
设置 clockwise 为 false 可以实现逆时针绘制。
<un-circle-progress :value="percentage" :clockwise="false">
{{ percentage }}%
</un-circle-progress>自定义颜色
通过 active-color 和 inactive-color 属性自定义进度环的颜色。
<un-circle-progress :value="percentage" active-color="#ff6b6b" inactive-color="#ffe0e0"></un-circle-progress>背景颜色
使用 bg-color 属性设置圆环内部的背景颜色。
<un-circle-progress :value="percentage" bg-color="#f0f0f0">
{{ percentage }}%
</un-circle-progress>交互控制
可以通过外部事件动态控制进度值。
<un-circle-progress :value="percentage">
{{ percentage }}%
</un-circle-progress>
<view @click="handleClick('plus')">增加</view>
<view @click="handleClick('minus')">减少</view>
<script setup>
import { ref } from 'vue'
import { range } from '@/uni_modules/uview-unix'
const percentage = ref(50)
const handleClick = (type) => {
if(type == 'plus') {
percentage.value = range(0, 100, percentage.value + 10)
} else {
percentage.value = range(0, 100, percentage.value - 10)
}
}
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 圆环进度百分比值,为数值类型,0-100 | number | 0 |
| inactive-color | 圆环的底色 | string | #ececec |
| active-color | 圆环激活部分的颜色 | string | #19be6b |
| size | 整个圆环组件的宽度,高度默认等于宽度值,单位 rpx | number | 200 |
| stroke-width | 圆环的边框宽度,单位 rpx | number | 14 |
| max | 进度的最大值 | number | 100 |
| clockwise | 是否顺时针方向绘制 | boolean | true |
| duration | 进度变化的动画时长,单位 ms | number | 500 |
| start-angle | 圆环开始绘制的角度,单位弧度 | number | -π/2 |
| type | 如设置,active-color值将会失效 | Enum | - |
| bg-color | 圆环内部背景颜色 | string | null |
Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| default | 圆环内部内容 | - |
