派生自 STUWMS

编辑 | blame | 历史 | 原始文档

<zui-progress-bar />

简单而又潜力无限的水平进度条组件。

🍏 在线演示

💻 点我在浏览器里预览 https://uni.imgozi.cn/zui-progress-bar/

PS: 启动浏览器预览需要打开手机模器

📱 扫码体验

🍐 快速上手：

<zui-progress-bar :value="0.66" />

🍎 兼容性说明

兼容性 小程序 版本 说明
快应用 0.1.0
✅ 微信小程序 0.1.0
✅ 支付宝小程序 0.1.0
百度小程序 0.1.0
字节小程序 0.1.0
✅ QQ小程序 0.1.0
✅ 钉钉小程序 0.1.0
快手小程序 0.1.0
✅ 飞书小程序 0.1.0
京东小程序 0.1.0

☕🍻欢迎有兴趣的小伙伴一起完善小程序兼容性。🍻☕

🍊 参数

🍒 value: number

进度，百分比。范围：[0, 1]

🍒 width: number

组件宽度

🍒 height: number

组件高度

🍒 disableValue: boolean

隐藏百分比

🍒 unit: string

百分比单位符号。默认：%

🍒 type: 'left' |'center' |'right' |'outside-left' |'outside-right' |'follow-left' |'follow-right'

进度条类型

值 说明
left 百分比显示在进度条左侧，叠加在进度条上方。
center 百分比显示在进度条中间，叠加在进度条上方。
right 百分比显示在进度条右侧，叠加在进度条上方。
outside-left 百分比显示在进度条左侧，在进度条外部。
outside-right 百分比显示在进度条右侧，在进度条外部。
follow-left 百分比显示在进度条头部左侧，叠加在进度条上方。
follow-right 百分比显示在进度条头部右侧，叠加在进度条上方。

🍒 rounded: boolean

使用圆角。

🍒 color: string

文字颜色。合法的 CSS 颜色值

🍒 invertColor: boolean

反转颜色。

🍒 texture: string | string[]

设置进度条前景与背景纹理。

当 texture 值为字符串或数组只有一个值时，只设置前景，背景为透明。

tips：纹理可以是任何合法的 css background 值

🍓 支持

如果组件对您有帮助，请不吝打赏。肥宅快乐水🥤是创作动力！🥤🥤🥤