用微信小程序开店之六——小程序组件2：“基础内容”

上一讲讲了“视图容器”，本讲继续我们的“小程序组件”之旅。

1、小程序基础组件总览

2、基础内容组件

在上讲示例基础上，基于“测试页面2”继续修改test2.wxml文件

接下来，为大家展示“基础内容”各个组件的例子。

（1）icon组件代码示例

修改test2.wxml文件，在“黄色背景”中追加“icon组件”代码，然后编译运行，模拟器上显示出图标效果，如下图：

icon组件特殊属性说明：

1）type：指定了几种常用icon类型。取值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

2）size：指定icon图标尺寸，单位：px，默认值：23

3）color：制定icon的颜色。取值：同css的color

（2）text组件代码示例

修改test2.wxml文件，在“蓝色背景”中追加“text组件”代码，然后编译运行，模拟器上显示出“文字”效果，如下图：

text组件特殊属性说明：

1）selectable：文本内容是否可选，默认值：false

2）space：是否显示连续空格，默认值：false

3）decode：是否解码，默认值：false；与space属性配合使用时，可以识别文本串中的       等空格字符

注意space有效值如下：

1）ensp：中文空格字符一半大小

2）emsp：中文空格字符大小

3）nbsp：根据字体设置的空格大小

（3）progress组件代码示例

修改test2.wxml文件，在“绿色背景”中追加“progress组件”代码，然后编译运行，模拟器上显示出“滚动条”效果，如下图：

progress组件特殊属性说明：

1）percent：进度条百分比，Float类型，取值：0~100

2）show-info：是否在进度条右侧显示百分比数值，默认值：false

3）stroke-width：进度条宽度，单位px，默认值：6

4）color：进度条颜色，默认值：#09BB07

5）activeColor：已选择的进度条颜色

6）backgroundColor：未选择的进度条颜色

7）active：进度条步进动画