【微信小程式】元件（五）progress
阿新 • • 發佈：2019-01-11
記錄一個關於progress元件的demo，先看下效果↓
1.附上wxml程式碼 ↓
<progress class="usual_progress" percent="20" show-info /> <progress class="usual_progress" percent="40" stroke-width="12" /> <progress class="usual_progress" percent="60" color="pink" /> <progress class="usual_progress" percent="80" active />
.usual_progress{
width: 100%;
height: 20px;
}①第一個progress百分比為20， show-info屬性為true,在進度條右側顯示進度數字；
②第二個progress百分比為40，stroke-width進度條的寬度（高度）設定為12px,預設為6px;
③第三個progress設定顏色為pink;
④第四個progress中active屬性為true，進度條動態顯示。
（只要寫上布林變數的屬性，則屬性值預設為true，刪除該屬性或設定屬性值為“{{false}}”才為false效果。）
3.附上官網的開發指南
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| percent | Float | 無 | 百分比0~100 |
| show-info | Boolean | false | 在進度條右側顯示百分比 |
| stroke-width | Number | 6 | 進度條線的寬度，單位px |
| color | Color | #09BB07 | 進度條顏色 （請使用 activeColor） |
| activeColor | Color | 已選擇的進度條的顏色 | |
| backgroundColor | Color | 未選擇的進度條的顏色 | |
| active | Boolean | false | 進度條從左往右的動畫 |
今天就記錄到這裡，中秋節快樂。