进度条。组件属性的长度单位默认为 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 |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |
✔️ |