【微信小程序】icon系统图标案例

演示效果：主要用到index.wxml,index.wxss

 <!--index.wxml的代码演示-->
 <!--第1排代码演示-->
 <view class="group">
    <view class="view-section">
      <icon type="success"></icon><!--案例1默认样式的演示-->
      <icon type="success" size="50"></icon><!--案例2：大小的演示-->
      <icon type="success_no_circle" size="50"></icon><!--案例3：没有圆圈的演示-->
      <icon type="success" size="50" color="red"></icon><!--案例4：颜色的演示-->
    </view>


<!--第2排代码演示-->
<view class="group">
  <block wx:for="{{iconSize}}">  <!--定义系统图标大小的数组名iconSize-->
    <icon type="success" size="{{item}}"/>
  </block>
</view>


<!--第3和第4排代码演示-->
<view class="group">
  <block wx:for="{{iconType}}"> <!--定义系统图标类型的数组名iconType-->
    <icon type="{{item}}" size="45"/>
  </block>
</view>


<!--第5排代码演示-->
<view class="group">
  <block wx:for="{{iconColor}}"><!--定义系统图标的颜色的数组名iconColor-->
    <icon type="success" size="45" color="{{item}}"/>
  </block>
</view>

//index.js的代码演示
Page({
  data: {
    //icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear属性数组
        iconType: [
      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
      'info_circle', 'cancel', 'search', 'clear'
    ],
    iconSize: [20, 30, 40, 50, 60, 70],//显示的大小数组,icon的大小，单位px




        iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'//颜色数组icon的颜色，同css的color
    ]
  }
})