更新记录

1.0.3（2024-06-04） 下载此版本

1.0.3

1.0.2（2024-05-31） 下载此版本

1.0.2

1.0.1（2024-05-31） 下载此版本

1.0.1

平台兼容性

uni-app

uni-app x

qying-circular-progress

• 圆形进度条,支持Nvue和vue
• 支持设置进度条最大值
• 借鉴于: 此插件 在此感谢

使用方式

<template>
    <view class="qying_circle_progress">
        <view class="circle_item">
            <text class="max_val">默认: 100</text>
            <qyingCircleProgress originalColor="#ececec" processColor="#2979ff" innerbgColor="#fff" :process="process"
                :radius="150" :barWidth="20">
                <text class="btntext">{{process}}</text>
            </qyingCircleProgress>
        </view>
        <view class="circle_item">
            <text class="max_val">最大值: 30</text>
            <qyingCircleProgress originalColor="#ececec" processColor="#ff9900" innerbgColor="#fff" :process="process"
                :radius="150" :barWidth="20" :max="30">
                <text class="btntext">{{process}}</text>
            </qyingCircleProgress>
        </view>
        <view class="circle_item">
            <text class="max_val">最大值: 30  宽度: 100</text>
            <qyingCircleProgress originalColor="#ececec" processColor="#19BE6B" innerbgColor="#fff" :process="process"
                :radius="100" :barWidth="15" :max="30">
                <text class="btntext">{{process}}</text>
            </qyingCircleProgress>
        </view>
    </view>
</template>

<script>
    import qyingCircleProgress from '@/uni_modules/qying-progress/components/qying-progress/qying-progress.vue';
    export default {
        components: {
            qyingCircleProgress
        },
        data() {
            return {
                process: 20,
            }
        },
        onLoad() {

        },
        methods: {
        }

    }
</script>

<style scoped>
    .circle_item{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30rpx;
    }
    .max_val{
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }
    .btntext {
        color: #000;
        font-size: 40rpx;
        font-weight: bold;
    }

</style>

参数