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