一、Icon 图标
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/* ---page/test/test.wxml----*/
<
view
class
=
"group"
>
<
block
wx:for
=
"{{iconType}}"
>
<
icon
type
=
"{{item}}"
size
=
"45"
/>
</
block
>
</
view
>
<
view
class
=
"group"
>
<
block
wx:for
=
"{{iconColor}}"
>
<
icon
type
=
"success"
size
=
"45"
color
=
"{{item}}"
/>
</
block
>
</
view
>
<
view
class
=
"group"
>
<
block
wx:for
=
"{{iconSize}}"
>
<
icon
type
=
"success"
size
=
"{{item}}"
/>
</
block
>
</
view
>
/* ---page/test/test.wxml----*/
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/* ---page/test/test.js----*/
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
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'
]
}
})
/* ---page/test/test.js----*/
|
效果图是这样的。。。之后在把属性图附上。。就是样式。这章基本上没啥可说的。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String |
| icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| size | Number | 23 | icon的大小，单位px |
| color | Color |
| icon的颜色，同css的color |
二、text
这个其实也没什么可说的。。他相当于 html的 span标签 是个行内元素。两个text标签在一起并不会换行。
三、progress 进度条
| percent | Float | 无 | 百分比0~100 |
| showInfo | Boolean | false | 在进度条右侧显示百分比 |
| strokeWidth | Number | 6 | 进度条线的宽度，单位px |
| color | Color | #09BB07 | 进度条颜色 |
| active | Boolean | false | 进度条从左往右的动画 |
|
1
2
3
4
5
6
7
8
9
|
/* ---page/test/test.wxml----*/
<progress percent=
"20"
show-info />
<progress percent=
"40"
stroke-width=
"12"
/>
<progress percent=
"60"
color=
"pink"
/>
<progress percent=
"80"
active />
/* ---page/test/test.wxml----*/
|