【微信小程序】组件(三)icon
程序员文章站
2022-07-14 21:35:28
...
下面一下记录小程序的icon组件使用,依旧先展示一下效果图,有三组图标。
1.在js文件的data对icon属性进行定义:
iconSize定义icon的大小,单位为px;
iconColor定义icon的颜色,可用指定颜色、rgb格式颜色和16进制颜色;
iconType定义icon的样式,为目前官网支持的样式。
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'rgb(0,255,255)', "#118BFD"
],
iconType: [
'success', 'success_circle', 'success_no_circle',
'info', 'info_circle', 'warn',
'waiting', 'waiting_circle', 'cancel', 'download',
'search', 'clear', 'safe_success','safe_warn','circle'
]
}
})
2.在wxml中进行引用 ↓
第一组使用相同的样式success,不同的尺寸;
第二组使用相同的尺寸40px,用wx:for="{{iconType}}"循环引用不同样式。
第三组使用相同尺寸和样式,展示各种颜色。
<view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="40"/> </block> </view> <view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="40" color="{{item}}"/> </block> </view>
group样式代码 ↓
.group{
height: 150px;
width: 100%;
}
3.最后附上官方属性定义
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | Number | 23 | icon的大小,单位px |
color | Color | icon的颜色,同css的color |
欢迎交流。
上一篇: JAVA第四次作业