小程序开发实战（6）：基础组件（text、icon和progress）
小程序开发实战（6）：基础组件（text、icon和progress）
小程序在有很多组件，其中基础组件用来显示一些静态的信息，也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。
1. text组件
text是小程序中最简单的组件，用于显示文本。该组件支持转义符“\”。text组件的使用方法如下：
<text>要显示的内容</text>text组件支持嵌套，也就是允许下面的形式。
<text>
要显示的内容
<text>嵌套的内容</text>
</text>下面是一段完整的使用text组件的布局代码，在这段代码中，包含了两个text组件（嵌套形式），以及三个按钮。分别向text组件中添加文本、删除文本以及改变text组件中文字的颜色。
<text style="margin: 20px;font-size: 40px;color: {{color}}">
{{text}}
<text style="color:#00ffff">（最后一行）</text>
</text>
<view style="margin: 20px;">
<button bindtap="add">添加一行</button>
<button bindtap="remove">删除一行</button>
<button bindtap="setColor">设置文字颜色</button>
</view>这段布局代码的显示效果如图1所示。
图1 text组件效果演示
这三个按钮分别对应三个函数：add、remove和setColor。改变text组件中文本时通过改变text变量的值完成的，而设置text组件中文本的颜色是通过改变color变量的值完成的，完整的实现代码如下：
var initData = '第一行\n第二行'
Page({
data: {
text: initData, // 文本的初始数据
color: '#ff0000' // 文本的初始颜色
},
extraLine: [], // 用于保存追加的字符串
add: function (e) {
// 最近一个新行
this.extraLine.push('新行' + (this.extraLine.length + 1));
this.setData({
text: initData + '\n' + this.extraLine.join('\n')
})
},
remove: function (e) {
// 如果有追加的行，从最后一行删除
if (this.extraLine.length > 0) {
this.extraLine.pop()
this.setData({
text: initData + '\n' + this.extraLine.join('\n')
})
}
},
setColor: function (e) {
// 让文本颜色在红色和蓝色之间不断切换
if (this.data.color == '#ff0000') {
this.setData(
{
color: '#0000ff'
}
)
}
else {
this.setData(
{
color: '#ff0000'
}
)
}
}
})从这段JavaScript代码可以看出，当点击“添加一行”按钮后，会向extraLine数组中添加一行字符串。然后会利用“\n”让字符串折行。
2. 系统内置图标组件（icon）
icon组件用于显示系统内置的图标，该组件并不能自己指定图标文件。icon组件包含如下3个属性。
- size：Number类型，用于设置图标的尺寸，默认值是23
- type：String类型，用于设置系统图标的类型，详细的类型见后面的JavaScript代码
- color：Color类型，和css中的color属性的作用相同。该属性没有默认值，如果不指定该属性，每一个类型的图标会使用自己的默认颜色，如success图标的默认颜色是绿色
下面分别来演示这三个属性的使用方法。
下面的布局代码通过循环为icon组件显示的图标设置了不同的尺寸。
<block wx:for-items="{{iconSize}}">
<icon type="success" size="{{item}}" />
</block>其中iconSize是在index.js文件中定义的数组变量，为了方便，下面给出了index.js文件的完整代码，其中iconType数组定义了目前icon组件支持的所有系统图标的类型。
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70].reverse(), // 倒序数组
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})在初始化iconSize数组时，使用了reverse函数将数组元素进行倒序处理，所以前面的布局代码显示的效果如图2所示。
图2 从大到小显示success图标
下面的布局代码用于根据iconType数组显示不同的系统图标，这些图标都会使用默认的颜色，字号都是45。
<view style="margin-top:30px">
<block wx:for-items="{{iconType}}">
<icon type="{{item}}" size="45" />
</block>
</view>显示效果如图3所示。
图3 显示所有的系统图标
下面的布局代码根据iconColor数组为icon设置不同的颜色。
<view style="margin-top:30px">
<block wx:for-items="{{iconColor}}">
<icon type="safe_success" size="45" color="{{item}}" />
</block>
</view>显示效果如图4所示。
图4 为icon组件设置不同的颜色
3. progress组件
progress组件可以设置完成的百分比。该组件有如下5个属性。
- percent：Float类型，默认值是0，该属性的取值范围是0~100
- show-info：Boolean类型，默认值是false，如果该属性为true，会在进度条右侧显示百分比
- stroke-width：Number类型，默认值是6，单位是px，表示进度条的宽度
- color：Color类型，默认值是#09BB07，表示进度条颜色
- active：Boolean类型，默认值是false，如果该属性值为true，表示进度条在装载时会以动画形式显示（从左到右的动画）
下面的布局代码演示了progress组件的各种用法。
<view style="margin:30px">
<progress percent="20" show-info/>
<progress percent="40" active/>
<progress percent="60" stroke-width="10" />
<progress percent="80" color="#10AEFF" />
</view>显示效果如图5所示。
图5 进度条效果