微信小程序（6）：基础内容组件

一、icon 图标

<icon type="success" size="40"/>
<icon type="success_no_circle" size="40"/>
<icon type="info" size="40"/>
<icon type="warn" size="40"/>
<icon type="waiting" size="40"/>
<icon type="cancel" size="40"/>
<icon type="download" size="40"/>
<icon type="search" size="40"/>
<icon type="clear" size="40"/>

当然，也可以用 color 指定 icon 的颜色：

<icon type="success" size="40" color="pink"/>

二、progress 进度条

progress 的属性有很多，比如以下几个：

1、percent：百分比0~100

<progress percent="40"/>

2、show-info：在进度条右侧显示百分比

<progress percent="40" show-info />

3、border-radius：圆角大小

<progress percent="40" show-info  border-radius="5"/>

4、font-size：右侧百分比字体大小

<progress percent="40" show-info  border-radius="5" font-size="18"/>

5、stroke-width：进度条线的宽度（指的是粗细）

<progress percent="40" show-info  border-radius="5" font-size="18" stroke-width="10"/>

6、activeColor：已选择的进度条的颜色

<progress percent="40" show-info activeColor="blue"/>

7、backgroundColor：未选择的进度条的颜色

<progress percent="40" show-info activeColor="blue" backgroundColor="red"/>

8、active：进度条从左往右的动画

<progress percent="40" show-info activeColor="blue" backgroundColor="red" active/>

可以看到进度是慢慢增长到40%的。

9、active-mode：backwards: 动画从头播；forwards：动画从上次结束点接着播

10、duration：进度增加1%所需毫秒数，默认是30

<progress percent="40" show-info activeColor="blue" backgroundColor="red" active duration="60"/>

这里我们设置成60，可以看到进度增长的明显慢了。

三、rich-text 富文本

<rich-text nodes='<div style="color:blue"><b>小程序</b>开发</div>'></rich-text>