更新记录

1.0.0（2026-06-19） 下载此版本

yc-point-progress

一个基于 uni-app 的圆形进度条组件，支持自定义颜色、半径、进度条宽度等属性。

功能特点

• 支持自定义进度颜色和背景颜色
• 可调节半径和进度条宽度
• 支持设置起始角度
• 支持插槽内容显示
• 兼容 Vue2 和 Vue3
• 支持 app-vue、app-nvue、h5、mp 等多端

安装方式

通过 uni_modules 安装

直接将组件放入 src/uni_modules/ 目录下即可使用，无需额外配置。

使用示例

基础用法

<template>
  <view class="demo">
    <yc-point-progress :process="60">
      <text class="progress-text">60%</text>
    </yc-point-progress>
  </view>
</template>

<style>
.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.progress-text {
  font-size: 24rpx;
  color: #333;
}
</style>

自定义样式

<template>
  <view class="demo">
    <yc-point-progress
      :process="85"
      :radius="40"
      :barWidth="4"
      processColor="#4CAF50"
      originalColor="#E8F5E9"
      innerbgColor="#FFFFFF"
      :startPosDegree="0"
    >
      <text class="progress-text">85%</text>
    </yc-point-progress>
  </view>
</template>

属性说明

插槽说明

示例展示

示例 1：基础进度条

<yc-point-progress :process="30">
  <text>30%</text>
</yc-point-progress>

示例 2：大尺寸进度条

<yc-point-progress
  :process="75"
  :radius="50"
  :barWidth="5"
  processColor="#2196F3"
  originalColor="#E3F2FD"
>
  <text class="large-text">75%</text>
</yc-point-progress>

示例 3：从底部开始的进度条

<yc-point-progress
  :process="50"
  :startPosDegree="180"
  processColor="#FF9800"
>
  <text>50%</text>
</yc-point-progress>

注意事项

1. process 属性值应在 0-100 范围内
2. radius 和 barWidth 的单位为 px
3. startPosDegree 为角度值，0 表示从顶部开始，顺时针方向
4. 组件内部使用 flex 布局，插槽内容会居中显示

兼容性

平台兼容性

uni-app(3.7.12)

uni-app x(3.7.10)

yc-point-progress

一个基于 uni-app 的圆形进度条组件，支持自定义颜色、半径、进度条宽度等属性。

功能特点

• 支持自定义进度颜色和背景颜色
• 可调节半径和进度条宽度
• 支持设置起始角度
• 支持插槽内容显示
• 兼容 Vue2 和 Vue3
• 支持 app-vue、app-nvue、h5、mp 等多端

安装方式

通过 uni_modules 安装

直接将组件放入 src/uni_modules/ 目录下即可使用，无需额外配置。

使用示例

基础用法

<template>
  <view class="demo">
    <yc-point-progress :process="60">
      <text class="progress-text">60%</text>
    </yc-point-progress>
  </view>
</template>

<style>
.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.progress-text {
  font-size: 24rpx;
  color: #333;
}
</style>

自定义样式

<template>
  <view class="demo">
    <yc-point-progress
      :process="85"
      :radius="40"
      :barWidth="4"
      processColor="#4CAF50"
      originalColor="#E8F5E9"
      innerbgColor="#FFFFFF"
      :startPosDegree="0"
    >
      <text class="progress-text">85%</text>
    </yc-point-progress>
  </view>
</template>

属性说明

插槽说明

示例展示

示例 1：基础进度条

<yc-point-progress :process="30">
  <text>30%</text>
</yc-point-progress>

示例 2：大尺寸进度条

<yc-point-progress
  :process="75"
  :radius="50"
  :barWidth="5"
  processColor="#2196F3"
  originalColor="#E3F2FD"
>
  <text class="large-text">75%</text>
</yc-point-progress>

示例 3：从底部开始的进度条

<yc-point-progress
  :process="50"
  :startPosDegree="180"
  processColor="#FF9800"
>
  <text>50%</text>
</yc-point-progress>

注意事项

1. process 属性值应在 0-100 范围内
2. radius 和 barWidth 的单位为 px
3. startPosDegree 为角度值，0 表示从顶部开始，顺时针方向
4. 组件内部使用 flex 布局，插槽内容会居中显示

兼容性