一. 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| percent | Float | 进度 百分比0~100 | |
| stroke-width | Number | 6 | 进度条线的宽度，单位px。实际上是进度条的高度 |
| backgroundColor | Color | 未选择的进度条的颜色 | |
| activeColor | Color | 选中的进度条的颜色 | |
| show-info | Boolean | false | 是否在进度条右侧显示百分比 |
| active | Boolean | false | 是否开启进度条从左往右的动画 |
| active-mode | String | backwards | backwards: 动画从头播；forwards：动画从上次结束点接着播 |
二. 代码部分
wxml
<view>
<progress class="progress"></progress>
<progress class="progress" percent="50" stroke-width='20'></progress>
<progress class="progress" percent="50" backgroundColor="gray" activeColor="red"></progress>
<progress class="progress" percent="50" show-info/>
<progress class="progress" percent="50" show-info active/>
<progress class="progress" percent="50" show-info active active-mode="forwards" />
</view>
- wxss
.progress {
width: 80%;
margin-left: 10%;
margin-top: 50px;
}
progress的实例.png
