一. 屬性說明
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| 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
