进度条。组件属性的长度单位默认为 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 |
number |
0 |
否 |
圆角大小 |
fontSize |
number |
16 |
否 |
右侧百分比字体大小,单位 px |
strokeWidth |
number |
6 |
否 |
进度条线的宽度,单位 px |
color |
string |
"#09BB07" |
否 |
进度条颜色 (请使用 activeColor) |
activeColor |
string |
|
否 |
已选择的进度条的颜色 |
backgroundColor |
string |
|
否 |
未选择的进度条的颜色 |
active |
boolean |
false |
否 |
进度条从左往右的动画 |
activeMode |
“backwards” or “forwards” |
backwards |
否 |
backwards: 动画从头播
forwards: 动画从上次结束点接着播 |
duration |
number |
30 |
否 |
进度增加 1% 所需毫秒数 |
onActiveEnd |
BaseEventOrigFunction<any> |
|
否 |
动画完成事件 |
API 支持度
API |
微信小程序 |
百度小程序 |
支付宝小程序 |
字节跳动小程序 |
H5 |
React 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 |
微信小程序 |
百度小程序 |
支付宝小程序 |
字节跳动小程序 |
H5 |
React Native |
Progress |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |