跳到主要内容
版本:3.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 or number0圆角大小
fontSizestring or number16右侧百分比字体大小
strokeWidthstring or number6进度条线的宽度
colorstring"#09BB07"进度条颜色 (请使用 activeColor)
activeColorstring"#09BB07"已选择的进度条的颜色
backgroundColorstring"#EBEBEB"未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
activeMode"backwards" or "forwards"backwardsbackwards: 动画从头播

forwards: 动画从上次结束点接着播
durationnumber30进度增加 1% 所需毫秒数
ariaLabelstring无障碍访问,(属性)元素的额外描述
onActiveEndCommonEventFunction动画完成事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
ProgressProps.percent✔️✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.showInfo✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.borderRadius✔️✔️✔️✔️✔️✔️
ProgressProps.fontSize✔️✔️✔️✔️✔️✔️
ProgressProps.strokeWidth✔️✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.color✔️✔️✔️✔️✔️✔️
ProgressProps.activeColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.backgroundColor✔️✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.active✔️✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.activeMode✔️✔️✔️✔️✔️✔️✔️✔️
ProgressProps.duration✔️✔️✔️✔️✔️✔️
ProgressProps.ariaLabel✔️
ProgressProps.onActiveEnd✔️✔️✔️✔️✔️✔️