小程序学习02->icon图标与progress进度条

一、icon

icon为显示图标的组件，其属性如下所示：

.wxml文件

<view class="group">
    <block wx:for="{{iconSize}}">
        <icon type="success" size="{{item}}"></icon>
    </block>
</view>

<view class="group">
    <block wx:for="{{iconType}}">
        <icon type="{{item}}" size="45"></icon>
    </block>
</view>

<view>
    <block wx:for="{{iconColor}}">
        <icon type="success" size="60" color="{{item}}"></icon>
    </block>
</view>

.js文件

Page({
  data:{
    iconSize:[20,30,40,50,60,70],
    iconColor:[
      'red','orange','yellow','green','rgb(0,255,255)','blue',
      'purple'
    ],
    iconType:[
      'success','success_no_circle','info','warn','waiting',
      'search','cancel'
    ],
  },

效果图：

二、progress

progress属性如下图所示：

.wxml文件

<progress percent="40" show-info="true"/>
<progress percent="30" stroke-width="100"/>

<progress percent="50" color="#ff0000"/>

<progress percent="70" active/>

效果图：