更新记录

1.0.4（2025-04-17） 下载此版本

1、fix bug: 修复拖动进度时页面也会跟着滑动的问题

1.0.3（2025-02-28） 下载此版本

1、增加tag值，处理当页面需要渲染多个进度条时不显示的问题。

1.0.2（2025-02-27） 下载此版本

1、增加自定义刻度功能，根据传入的scales((数组)属性来控制

平台兼容性

uni-app

其他

heyuan-progress-circle

功能

1. 自定义一个圆弧进度条，实现方式是通过canvas。
2. 支持自定义外层颜色、未填充颜色、已填充颜色和圆形icon颜色。
3. 支持自定义大小、线条宽度。
4. 支持渐变色，通过传入数组progressColor的值来控制。
5. 支持手动拖拽进度，用emit方式，通过valueChange方法回调给页面。

快速集成

1. 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目
2. 点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules 目录下

使用示例

<template>
    <view class="content">
        <view class="">
            <heyuan-progress-circle
                :value="currentValue"
                :width="360"
                :height="360"
                :progressColor="colors"
                @valueChange="onValueChanged"></heyuan-progress-circle>
            <view class="">当前值: {{ currentValue }}</view>
            <button @click="update">测试</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentValue: 0.5,
            colors: ['#00FF00', '#FFFF00', '#FF0000']
        }
    },
    onLoad() {},
    methods: {
        update() {
            this.currentValue = 0.8
        },
        onValueChanged(e) {
            let value = e.value
            this.currentValue = Math.round(100 * value) / 100
        }
    }
}
</script>

<style>
page {
    background-color: #f5f5f5;
}
.content {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>