跳到主要内容
版本:1.x

Progress

进度条

属性

属性名类型默认值说明
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
示例:
import Taro, { Component } from '@tarojs/taro'
import { View, Progress } from '@tarojs/components'

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>
)
}
}