更新记录

1.0.0(2024-09-14) 下载此版本

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


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

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,
},

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问