3.2　内容组件

相较于视图组件，内容组件的内容会少很多。在微信小程序中，仅提供了icon（图标组件）、text（文本组件）、rich-text（富文本组件）、progress（进度条组件）。通常大家都会选择设置CSS样式来改变文字效果，所以富文本组件不是很常用。所以，在本节的学习中主要掌握图标、文本和进度条组件即可。

3.2.1　图标icon

其实，icon的功能实际上用image也可以实现，主要是小程序官方提供了很多内置的图标，方便开发者使用，而且这些图标与系统风格一致。icon的自带属性如表3.6所示。

icon的type属性对应的样式如表3.7所示。

【示例3-6】

在演示代码之前，我们先修改index.wxml和index.js，增加基础内容组件的演示按钮。

首页效果如图3.7所示。

接下来继续演示icon组件。它的属性不多，这里直接演示3个属性效果，代码如下：

运行效果如图3.8所示。

【代码解析】第1个view用于样式不同的type样式，第2个view演示尺寸的变化，最后一个是颜色的变化。

3.2.2　进度条progress

progress是进度条组件。在日常开发中，进度条是十分常见的，需要用户等待的地方基本都要使用一个进度条。progress的自带属性如表3.8所示。

【示例3-7】

使用progress组件创建一个从0到100的进度条，代码如下：

运行效果如图3.9所示。

【代码解析】我们通过percent控制百分比，通过stroke-width调整宽度，通过show-info显示进度，最后的active也是不可少的，否则进度会没有动画直接跳到100%。从图中可以看到进度到了27%。读者可以自行运行代码，看看进度条的动画。

3.2.3　文本text

text是最基础的文本组件。它提供了一些方便的属性，所以需要处理文字的时候尽量使用text而非view组件。text的自带属性如表3.9所示。

space的合法值如表3.10所示。

【示例3-8】

使用text组件演示selectable和space属性，代码如下：

运行效果如图3.10所示。

【代码解析】从中可以看出，设置了selectable之后，长按这块文字即可选中。A、B、C、D四行文字分别对应了空格设置的状态，对照表格的说明查看即可。