2023年微信小程序内容组件 progress

微信小程序内容组件 progress

微信小程序提供了一个名为progress的内容组件，它可以方便地展示进度条。通过设置percent属性来控制进度条的百分比完成程度。

组件属性

1. percent：指定进度百分比，取值范围为0~100。
2. show-info：是否在进度条右侧显示百分比，默认为false。
3. border-radius：进度条边框圆角大小，可设置为数值或字符串类型。
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%所需毫秒数，默认为30。
12. bindactiveend：动画完成事件的回调函数。

示例代码

<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>

以上代码展示了四个进度条实例，分别控制不同的百分比，并演示了一些属性的用法。可以通过微信开发者工具进行预览，更好地理解组件使用方法。