【微信小程序】组件（五）progress_小程序progress 四分之一转圈-CSDN博客

本文介绍了微信小程序中Progress组件的使用，通过四个不同的示例展示了如何设置百分比、显示进度信息、调整进度条宽度及颜色，以及实现动态显示效果。详细介绍了show-info、stroke-width、color和active等属性的用法。

记录一个关于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代码如下↓

.usual_progress{
  width: 100%;
  height: 20px;
}

2.分别介绍一下四个progress

①第一个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	进度条从左往右的动画