进度条。组件属性的长度单位默认为 px

参考文档

类型

  1. ComponentType<ProgressProps>

示例代码

  1. export default class PageView extends Component {
  2. constructor() {
  3. super(...arguments)
  4. }
  5. render() {
  6. return (
  7. <View className='components-page'>
  8. <Progress percent={20} showInfo strokeWidth={2} />
  9. <Progress percent={40} strokeWidth={2} active />
  10. <Progress percent={60} strokeWidth={2} active />
  11. <Progress percent={80} strokeWidth={2} active activeColor='blue' />
  12. </View>
  13. )
  14. }
  15. }

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 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️