Version: next

Progress

进度条。组件属性的长度单位默认为 px

参考文档

类型

ComponentType<ProgressProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Progress percent={20} showInfo strokeWidth={2} />
<Progress percent={40} strokeWidth={2} active />
<Progress percent={60} strokeWidth={2} active />
<Progress percent={80} strokeWidth={2} active activeColor='blue' />
</View>
)
}
}

ProgressProps

参数类型默认值必填说明
percent
number
百分比 0~100
showInfo
boolean
false
在进度条右侧显示百分比
borderRadius
string | number
0
圆角大小
fontSize
string | number
16
右侧百分比字体大小
strokeWidth
string | number
6
进度条线的宽度
color
string
"#09BB07"
进度条颜色 (请使用 activeColor)
activeColor
string
"#09BB07"
已选择的进度条的颜色
backgroundColor
string
"#EBEBEB"
未选择的进度条的颜色
active
boolean
false
进度条从左往右的动画
activeMode
"backwards" | "forwards"
backwards
backwards: 动画从头播

forwards: 动画从上次结束点接着播
duration
number
30
进度增加 1% 所需毫秒数
onActiveEnd
BaseEventOrigFunction<any>
动画完成事件

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
ProgressProps.percent✔️✔️✔️✔️✔️✔️
ProgressProps.showInfo✔️✔️✔️✔️✔️
ProgressProps.borderRadius✔️✔️
ProgressProps.fontSize✔️✔️
ProgressProps.strokeWidth✔️✔️✔️✔️✔️✔️
ProgressProps.color✔️✔️✔️✔️✔️
ProgressProps.activeColor✔️✔️✔️✔️✔️✔️
ProgressProps.backgroundColor✔️✔️✔️✔️✔️✔️
ProgressProps.active✔️✔️✔️✔️✔️✔️
ProgressProps.activeMode✔️✔️✔️✔️✔️
ProgressProps.duration✔️✔️
ProgressProps.onActiveEnd✔️✔️

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Progress✔️✔️✔️✔️✔️✔️