微信小程序-icon组件

icon 组件

icon 组件，想必大家都应该清楚这个是图标组件吧，在微信小程序当中，为我们提供了一套 icon 图标类型。

?> icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

我们就来看一下 icon 当中的属性值即可。

属性

?> type: icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

index:wxml:

<block wx:for="{{types}}" wx:key="*this">
  <icon type="{{item}}"/>
</block>

index.js:

Page({
  data: {
    types: ["success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"]
  }
})

?> size: icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。

index.wxml:

<block wx:for="{{types}}" wx:key="*this">
  <icon type="{{item}}" 
        size="{{24 + index + 1 + 2}}"
  />
</block>

index.js:

Page({
  data: {
    types: ["success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"]
  }
})

?> color: icon的颜色，同css的color

index.wxml:

<block wx:for="{{types}}" wx:key="*this">
  <icon type="{{item}}"
        color="red"
  />
</block>