更新记录
1.0.1(2025-02-17)
下载此版本
修改了显示有稍微延迟的问题,更加完美了。
1.0.0(2025-02-17)
下载此版本
回头会更新
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.23 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
zmt-circular-progress
我试了插件市场几乎所有的插件,发现都不满意,不是有bug就是代码太复杂,有强迫症的我一生气自己写了了,去处了其他插件多余的代码,功能简单直接,亲测无bug。
使用方法:
配置easycom规则后,自动按需引入,无需import组件,直接引用即可。
<template>
<view class="video-vs-circle">
<zmt-circular-progress :width="65" :height="65" :lineWidth="8" progressGradientColor="#18bc37" fontColor="#18bc37" progressColor="#42b983" :percent="uploadProgress">
</zmt-circular-progress>
</view>
</template>
所有的大小值单位均为px
插件属性
属性 |
类型 |
默认值 |
说明 |
percent |
number |
0 |
进度条进度,更改此值即可实现进度递进更新 |
width |
number |
100 |
圆环宽度 |
height |
number |
100 |
圆环高度 |
lineWidth |
number |
10 |
圆环线宽度 |
bgColor |
string |
#e0e0e0 |
圆环进度环背景色 |
progressColor |
string |
#00c296 |
圆环进度条颜色 |
progressGradientColor |
string |
null |
圆环进度条渐变颜色,和progressColor配合渐变 |
fontShow |
bool |
true |
是否显示圆环内文本,如:70% |
fontSize |
number |
13 |
圆环内文本大小,fontShow为true时有效 |
fontColor |
string |
#00c296 |
圆环内文本颜色,fontShow为true时有效 |
@end |
callback |
null |
进度条步进到100时触发此事件 |