更新记录

1.0.0（2024-09-14） 下载此版本

发布自定义进度条，支持悬浮比例显示，自定义右侧百分比布局

平台兼容性

uni-app

uni-app x

qiao-progress

使用方法

<view class="mLR15 mT20">
    <qiao-progress backgroundColor="#FFFFFF" activeColor="#FFC635" :current="60" :total="100" :borderRadius="6"
        :strokeWidth="5" :active="false" :showFloat="true" :showRight="true" :customRight="false"></qiao-progress>
</view>

1. 如果要自定义右侧显示，customRight为true，然后在qiao-progress标签里写自己的布局即可

参数介绍

current: { //当前数量，也可以直接传进度值，那么此时total默认100即可
    type: Number,
    default: 0,
},
total: { //总数量，传值了会计算比例：current/total + '%'
    type: Number,
    default: 100,
},
strokeWidth: {// 进度条线的宽度，单位px   
    type: Number,
    default: 6,
},
borderRadius: {//圆角大小
    type: Number,
    default: 0,
},
backgroundColor: {//未选择的进度条的颜色  
    type: String,
    default: "#EBEBEB",
},
activeColor: {//已选择的进度条的颜色  
    type: String,
    default: "#FFC635",
},
active: { //是否显示动画
    type: Boolean,
    default: false,
},
showFloat: { //是否显示悬浮进度
    type: Boolean,
    default: true,
},
showRight: { //是否显示右侧
    type: Boolean,
    default: true,
},
customRight: { //自定义右侧布局插槽
    type: Boolean,
    default: false,
},