更新记录
1.0.1(2025-02-17) 下载此版本
修改了显示有稍微延迟的问题,更加完美了。
1.0.0(2025-02-17) 下载此版本
回头会更新
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
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时触发此事件 |