一、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----*/ |