进度条

属性

属性名类型默认值说明
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'
  3. export default class PageView extends Component {
  4. constructor() {
  5. super(...arguments)
  6. }
  7. render() {
  8. return (
  9. <View className='components-page'>
  10. <Progress percent={20} showInfo strokeWidth={2} />
  11. <Progress percent={40} strokeWidth={2} active />
  12. <Progress percent={60} strokeWidth={2} active />
  13. <Progress percent={80} strokeWidth={2} active activeColor='blue' />
  14. </View>
  15. )
  16. }
  17. }