2023年微信小程序內容組件 progress

微信小程序內容組件 progress

微信小程序提供了一個名為progress的內容組件，它可以方便地展示進度條。通過設置percent屬性來控制進度條的百分比完成程度。

組件屬性

1. percent：指定進度百分比，取值范圍為0~100。
2. show-info：是否在進度條右側顯示百分比，默認為false。
3. border-radius：進度條邊框圓角大小，可設置為數(shù)值或字符串類型。
4. font-size：進度條右側百分比字體大小，默認為16。
5. stroke-width：進度條線的寬度，默認為6。
6. color：進度條顏色，已被activeColor替代，請勿使用。
7. activeColor：已選擇的進度條的顏色，默認為#09BB07。
8. backgroundColor：未選擇的進度條的顏色，默認為#EBEBEB。
9. active：是否開啟進度條從左往右的動畫，默認為false。
10. active-mode：進度條動畫模式，可選值為backwards（動畫從頭播）和forwards（動畫從上次結束點接著播），默認為backwards。
11. duration：進度增加1%所需毫秒數(shù)，默認為30。
12. bindactiveend：動畫完成事件的回調函數(shù)。

示例代碼

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

以上代碼展示了四個進度條實例，分別控制不同的百分比，并演示了一些屬性的用法?？梢酝ㄟ^微信開發(fā)者工具進行預覽，更好地理解組件使用方法。

<本文由himall原創(chuàng)，商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請標明：himall原創(chuàng)>