进度条

属性

属性名类型默认值说明
percentFloat无百分比 0~100
showInfoBooleanfalse在进度条右侧显示百分比
strokeWidthNumber6进度条线的宽度，单位 px
colorColor#09BB07进度条颜色 （请使用 activeColor）
activeColorColor#09BB07已选择的进度条的颜色
backgroundColorColor#09BB07未选择的进度条的颜色
activeBooleanfalse进度条从左往右的动画
activeModeStringbackwardsbackwards: 动画从头播；forwards：动画从上次结束点接着播

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
percent✔✔✔✔✔✔
showInfo✔✔✔✔✔
strokeWidth✔✔✔✔✔✔
color✔✔✔✔
activeColor✔✔✔✔✔✔
backgroundColor✔✔✔✔✔✔
active✔✔✔✔✔✔
activeMode✔✔✔✔
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Progress } from '@tarojs/components'
  4. export default class PageView extends Component {
  5.   constructor() {
  6.     super(...arguments)
  7.   }
  9.   render() {
  10.     return (
  11.       <View className='components-page'>
  12.         <Progress percent={20} showInfo strokeWidth={2} />
  13.         <Progress percent={40} strokeWidth={2} active />
  14.         <Progress percent={60}  strokeWidth={2} active />
  15.         <Progress percent={80}  strokeWidth={2} active activeColor='blue' />
  16.       </View>
  17.     )
  18.   }
  19. }