title: Progress
sidebar_label: 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 | 微信小程序 | 百度小程序 | 支付宝小程序 | 字节跳动小程序 | 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 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
