Progress

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

参考文档

类型

  1. ComponentType<ProgressProps>

示例代码

  • React
  • Vue
  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. }
  1. <template>
  2. <view class="components-page">
  3. <progress percent="20" stroke-width="2" :show-info="true" />
  4. <progress percent="40" stroke-width="2" :active="true" />
  5. <progress percent="60" stroke-width="2" :active="true" />
  6. <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
  7. </view>
  8. </template>

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