基礎(chǔ)內(nèi)容組件的使用場景
- icon圖標組件
(1) icon圖標組件:
icon組件:是小程序提供的圖標組件。借助icon組件，可以以更低的資源占用展示更加豐富的內(nèi)容
<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文本組件 :是小程序最基礎(chǔ)的組件之一，借助text的組件，我們可以在頁面展示文字
- text文本組件:支持\n來換行
- text文本組件的三個參數(shù):
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可選 |
| space | String | false | 顯示連續(xù)空格 |
| 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組件:是小程序提供的進度條組件，能夠?qū)崿F(xiàn)小程序動態(tài)加載的。
<progress percent="20" show-info>
| 屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
|---|---|---|---|---|
| percent | Float | 無 | 百分比0~100 | |
| show-info | Boolean | false | 在進度條右側(cè)顯示百分比 | |
| stroke-width | Number | 6 | 進度條線的寬度，單位px | |
| color | Color | #09BB07 | 進度條顏色 （請使用 activeColor） | |
| activeColor | Color | 已選擇的進度條的顏色 | ||
| backgroundColor | Color | 未選擇的進度條的顏色 | ||
| active | Boolean | false | 進度條從左往右的動畫 | |
| active-mode | String | backwards | backwards: 動畫從頭播；forwards：動畫從上次結(jié)束點接著播 | 1.7.0 |
