更新记录

1.0.0（2025-07-18）

初始版本

平台兼容性

云端兼容性

uni-app x(4.25)

yzc-circle 类似于apple watch彩虹进度条（uniappx）

示例

<template>
    <view class="wrapper">
        <view class="rainbowPrgress">
            <yzc-cirlce class="cicle" :circleRadius="80" :progress="process1" :strokeWidth="20" strokeColor="#ff006c" :duration="2000" :bgAlpha="0.3" :animation="true"></yzc-cirlce>
            <yzc-cirlce class="cicle" :circleRadius="59" :progress="process2" :strokeWidth="20" strokeColor="#90fd00" :duration="2000" :bgAlpha="0.3" :animation="true"></yzc-cirlce>
            <yzc-cirlce class="cicle" :circleRadius="38" :progress="process3" :strokeWidth="20" strokeColor="#00bcc8" :duration="2000" :bgAlpha="0.3" :animation="true"></yzc-cirlce>
        </view>
    </view>
</template>

<script setup lang="uts">
    import YzcCirlce  from '@/uni_modules/yzc-circle/components/yzc-circle/yzc-circle.uvue'
    const process1 = ref(1.4)
    const process2 = ref(1.3)
    const process3 = ref(1.4)
</script>

<style lang="scss">
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    .rainbowPrgress {
        width: 200px;
        height: 200px;
        .cicle {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.001);
        }
    }
}
</style>