完整微信小程序(Java后端) 技術貼目錄清單頁面&＃xff08;必看&＃xff09;
進度條。愛掏網 - it200.com組件屬性的長度單位默認為px&＃xff0c;2.4.0起支持傳入單位(rpx/px)。愛掏網 - it200.com
| 屬性 | 類型 | 默認值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| percent | number | 否 | 百分比0~100 | 1.0.0 | |
| show-info | boolean | false | 否 | 在進度條右側顯示百分比 | 1.0.0 |
| border-radius | number/string | 0 | 否 | 圓角大小 | 2.3.1 |
| font-size | number/string | 16 | 否 | 右側百分比字體大小 | 2.3.1 |
| stroke-width | number/string | 6 | 否 | 進度條線的寬度 | 1.0.0 |
| color | string | #09BB07 | 否 | 進度條顏色&＃xff08;請使用activeColor&＃xff09; | 1.0.0 |
| activeColor | string | #09BB07 | 否 | 已選擇的進度條的顏色 | 1.0.0 |
| backgroundColor | string | #EBEBEB | 否 | 未選擇的進度條的顏色 | 1.0.0 |
| active | boolean | false | 否 | 進度條從左往右的動畫 | 1.0.0 |
| active-mode | string | backwards | 否 | backwards: 動畫從頭播&＃xff1b;forwards&＃xff1a;動畫從上次結束點接著播 | 1.7.0 |
| duration | number | 30 | 否 | 進度增加1%所需毫秒數 | 2.8.2 |
| bindactiveend | eventhandle | 否 | 動畫完成事件 | 2.4.1 |
示例代碼
在開發者工具中預覽效果
index.wxml
progress percent&＃61;"20" show-info />
progress percent&＃61;"40" stroke-width&＃61;"12" />
progress percent&＃61;"60" color&＃61;"pink" />
progress percent&＃61;"80" active />
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x0BIYxGK-1621996280517)(image-20240526093328098.png)]](https://img8.php1.cn/3cdc5/15b3d/bdf/bea6c37b5cb29d9d.png?x-oss-process&%EF%BC%8361;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0,size_16,color_FFFFFF,t_70)
微信搜一搜【java1234】關注這個放蕩不羈的程序員&＃xff0c;關注后回復【資料】有我準備的一線大廠筆試面試資料以及簡歷模板。愛掏網 - it200.com
聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。