微信小程序(五)基础内容组件
2018-05-30 本文已影响0人
我拥抱着我的未来
基础内容组件的使用场景
- icon图标组件
(1) icon图标组件:
icon组件:是小程序提供的图标组件。借助icon组件，可以以更低的资源占用展示更加丰富的内容
<icon type="success"></icon>
- icon组件有哪些属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | icon的类型:有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear | |
| size | Number | 23 | icon的大小,单位px |
| color | Color | icon的颜色,同css的color |
<icon type="success" size="23" color="yellow"></icon>
(2) text文本组件
- text文本组件 :是小程序最基础的组件之一，借助text的组件，我们可以在页面展示文字
- text文本组件:支持\n来换行
- text文本组件的三个参数:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可选 |
| space | String | false | 显示连续空格 |
| decode | Boolean | false | 是否解码 |
示例:
<text>124</text>
(3) rich-text 富文本组件
- 是小程序提供的富文本组件，能够在小程序中渲染出富文本字符串。
<rich-text nodes="{{html}}" bindtap="tap"></rich-text>
- 解析
Page({
data: {
html: '<div class="div_class" style="line-height: 60px; color: red;">Hello World!</div>',
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
(4)progress进度条
progress组件:是小程序提供的进度条组件，能够实现小程序动态加载的。
<progress percent="20" show-info>
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| percent | Float | 无 | 百分比0~100 | |
| show-info | Boolean | false | 在进度条右侧显示百分比 | |
| stroke-width | Number | 6 | 进度条线的宽度，单位px | |
| color | Color | #09BB07 | 进度条颜色 （请使用 activeColor） | |
| activeColor | Color | 已选择的进度条的颜色 | ||
| backgroundColor | Color | 未选择的进度条的颜色 | ||
| active | Boolean | false | 进度条从左往右的动画 | |
| active-mode | String | backwards | backwards: 动画从头播；forwards：动画从上次结束点接着播 | 1.7.0 |
