演示效果：主要用到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
]
}
})
