progress

1.0.0 新版功能: 低版本需做 兼容处理

组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性

类型

默认值

必填

说明

最低版本

percent

number

百分比0~100

1.0.0

show-info

boolean

false

在进度条右侧显示百分比

1.0.0

border-radius

number/string

0

圆角大小

2.3.1

font-size

number/string

16

右侧百分比字体大小

2.3.1

stroke-width

number/string

6

进度条线的宽度

1.0.0

color

string

#09BB07

进度条颜色(请使用activeColor)

1.0.0

activeColor

string

#09BB07

已选择的进度条的颜色

1.0.0

backgroundColor

string

#EBEBEB

未选择的进度条的颜色

1.0.0

active

boolean

false

进度条从左往右的动画

1.0.0

active-mode

string

backwards

backwards: 动画从头播;forwards:动画从上次结束点接着播

1.7.0

bindactiveend

eventhandle

动画完成事件

2.4.1

示例代码

在开发者工具中预览效果

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
https://developers.weixin.qq.com/miniprogram/dev/image/pic/progress.png?t=19050911