Skip to main content
Version: 2.x

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

参数类型默认值必填说明
percentnumber百分比 0~100
showInfobooleanfalse在进度条右侧显示百分比
borderRadiusstring | number0圆角大小
fontSizestring | number16右侧百分比字体大小
strokeWidthstring | number6进度条线的宽度
colorstring"#09BB07"进度条颜色 (请使用 activeColor)
activeColorstring"#09BB07"已选择的进度条的颜色
backgroundColorstring"#EBEBEB"未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
activeMode"backwards" | "forwards"backwardsbackwards: 动画从头播

forwards: 动画从上次结束点接着播
durationnumber30进度增加 1% 所需毫秒数
onActiveEndBaseEventOrigFunction<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✔️✔️✔️✔️✔️✔️