更新记录
1.0.0(2024-09-14)
下载此版本
发布自定义进度条,支持悬浮比例显示,自定义右侧百分比布局
平台兼容性
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>
- 如果要自定义右侧显示,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,
},