图标。
属性名 | 类型 | 默认值 | 说明 |
type | String | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | Number | 23 | icon的大小,单位px |
color | Color | icon的颜色,同css的color |
<view class="page">
<view class="page__hd">
<text class="page__title">icon</text>
<text class="page__desc">icon图标</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}" />
</block>
</view>
</view>
<view class="section section_gap">
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="45" />
</block>
</view>
</view>
<view class="section section_gap">
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="45" color="{{item}}" />
</block>
</view>
</view>
</view>
</view>
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','sage_success','safe_warn','success_circle','sucess_no_circle','waiting_circle','circle','download',
'info_circle','cancel','search','clear']
}
})
.group {
flex-direction: row;
align-items: center;
}