微信小程序表单组件

刚过完年停了近一个月，今天重新开始。
组件文档链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html

1.icon

wxml

<view class="container">
    <label wx:for="{{icons}}">
      <icon type="{{item}} " size="45"/>
    </label>
</view>

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

icon

2.text

wxml

<view class="container">
    <text>{{text}}</text>
    <label wx:for="{{icons}}">
      <icon type="{{item}} " size="45"/>
    </label>
</view>

  data: {
    text:"这是第一段内容\n第二段内容",
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    icons: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

3.progress

wxml

  <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="pink" />
    <progress percent="80" active />

wxss

progress{
  width: 100%;
  margin: 10px 0 10px 0;
}

progress