更新记录

1.0.1（2023-08-20）

增加了仪表盘形进度条效果

1.0.0（2023-08-20）

使用canvas绘制环状渲染动画

平台兼容性

使用教程

参数说明

参考代码

<template>
    <view style="margin: 10rpx 0 50rpx;padding:1rpx ;">
        <view style="color:#333;font-size:40rpx;text-align: center;margin: 20rpx 0 10rpx;">
            Progress 进度条
        </view>
        <view style="color:#6f6f6f;font-size:28rpx;text-align: center;margin: 20rpx 20rpx 10rpx;">
            用于展示操作进度，告知用户当前状态和预期。
        </view>
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">
            <view style="margin: 30rpx 0;">线形进度条</view>
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorPrimary"></niceui-progress>
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorSuccess"></niceui-progress>
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorWarning"></niceui-progress>
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorError"></niceui-progress>
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">
                <button @click="draw1">增加</button>
                <button @click="drawJian1">减少</button>
            </view>
        </view>
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">
            <view style="margin: 30rpx 0;">百分比内显</view>
            <niceui-progress type="line"  :percentage="percentage2" :color="colorPrimary"></niceui-progress>
            <niceui-progress type="line"  :percentage="percentage2" :color="colorSuccess"></niceui-progress>
            <niceui-progress type="line"  :percentage="percentage2" :color="colorWarning"></niceui-progress>
            <niceui-progress type="line"  :percentage="percentage2" :color="colorError"></niceui-progress>
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">
                <button @click="draw2">增加</button>
                <button @click="drawJian2">减少</button>
            </view>
        </view>
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">
            <view style="margin: 30rpx 0;">环形进度条</view>
            <view style="display: flex;justify-content: space-between;">
                <niceui-progress type="circle" :percentage="percentage3" ref="circle1" :color="colorPrimary"></niceui-progress>
                <niceui-progress type="circle" :percentage="percentage3" ref="circle2" :color="colorSuccess"
                    :width="120" :strokeWidth="10" :strokeLinecap="butt" :textColor="'red'" :textSize="14" :text="'完成率'"></niceui-progress>
            </view>

            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">
                <button @click="draw3">增加</button>
                <button @click="drawJian3">减少</button>
            </view>
        </view>
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">
            <view style="margin: 30rpx 0;">仪表盘形进度条</view>
            <chenzuheng-progress type="dashboard" :percentage="percentage4" ref="dashboard" :color="colorPrimary"></chenzuheng-progress>
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">
                <button @click="draw4">增加</button>
                <button @click="drawJian4">减少</button>
            </view>
        </view>
    </view>
</template>

<script>
    import NiceuiProgress from '@/uni_modules/niceui-progress/components/niceui-progress/niceui-progress.vue'
    export default {
        components: {NiceuiProgress},
        data() {
            return {
                percentage1:30,
                percentage2:60,
                percentage3:30,
                percentage3:50,
                colorPrimary: '#007aff',
                colorSuccess: '#4cd964',
                colorWarning: '#f0ad4e',
                colorError: '#dd524d',
            }
        },
        methods: {
            draw1(){
                this.percentage1+=30
                if(this.percentage1>99){
                    this.percentage1 = 100
                }
            },
            drawJian1(){
                this.percentage1-=10
                if(this.percentage1<1){
                    this.percentage1 = 0
                }
            },
            draw2(){
                this.percentage2+=30
                if(this.percentage2>99){
                    this.percentage2 = 100
                }
            },
            drawJian2(){
                this.percentage2-=10
                if(this.percentage2<1){
                    this.percentage2 = 0
                }
            },
            draw3(){
                this.percentage3+=30
                if(this.percentage3>99){
                    this.percentage3 = 100
                }
                this.$refs.circle1.draw(this.percentage3)
                this.$refs.circle2.draw(this.percentage3)
            },
            drawJian3(){
                this.percentage3-=20
                if(this.percentage3<1){
                    this.percentage3 = 0
                }
                //console.log(this.percentage3,'drawJian3-----')
                this.$refs.circle1.drawJian(this.percentage3)
                this.$refs.circle2.drawJian(this.percentage3)
            },
            draw4(){
                this.percentage4+=10
                if(this.percentage4>99){
                    this.percentage4 = 100
                }
                this.$refs.dashboard.draw(this.percentage4)
            },
            drawJian4(){
                this.percentage4-=20
                if(this.percentage4<1){
                    this.percentage4 = 0
                }
                console.log(this.percentage4,'drawJian4-----')
                this.$refs.dashboard.drawJian(this.percentage4)
            },
        }
    }
</script>

<style lang="scss">
    button{
        font-size: 32rpx;

    }
</style>