Progress
进度条
属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
percent | Float | 无 | 百分比 0~100 |
showInfo | Boolean | false | 在进度条右侧显示百分比 |
strokeWidth | Number | 6 | 进度条线的宽度,单位 px |
color | Color | #09BB07 | 进度条颜色 (请使用 activeColor) |
activeColor | Color | #09BB07 | 已选择的进度条的颜色 |
backgroundColor | Color | #09BB07 | 未选择的进度条的颜色 |
active | Boolean | false | 进度条从左往右的动画 |
activeMode | String | backwards | backwards: 动画从头播;forwards:动画从上次结束点接着播 |
各端支持度
属性 | 微信小程序 | H5 | ReactNative | 百度小程序 | 支付宝小程序 | 字节跳动小程序 |
---|---|---|---|---|---|---|
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>
)
}
}