微信小程序组件（五）progress

记录一个关于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.附上官网的开发指南

属性名类型默认值说明percentFloat无百分比0~100show-infoBooleanfalse在进度条右侧显示百分比stroke-widthNumber6进度条线的宽度，单位pxcolorColor#09BB07进度条颜色 （请使用 activeColor）activeColorColor 已选择的进度条的颜色backgroundColorColor 未选择的进度条的颜色activeBooleanfalse进度条从左往右的动画

今天就记录到这里，中秋节快乐。