微信小程序-UI控件的使用(5)

1、icon图标的使用

icon.wxml

<block wx:for-items="{{iconSize}}">
  <icon  type="{{item.type}}" size="{{item.size}}" color="{{item.color}}" />
</block>
           

icon.js:

Page({
  data: {
    iconNums:[{
        'type':'success',
        'size':'20',
        'color':'red'
    },
    {
        'type':'info',
        'size':'20',
        'color':'yellow'
    },{
        'type':'warn',
        'size':'30',
        'color':'green'
    },{
        'type':'safe_success',
        'size':'40',
        'color':'blue'
    }]
  }
})
           

效果图：

2、mask

mask.wxml

<mask hidden="{{hidden1}}" bindtap="mask1" hover-style="none" />
        <button type="default" bindtap="tap1">点击弹出默认mask</button>
           

mask.js

Page({
  data: {
    'hidden1':true
  },
  mask1:function(){
     this.setData({'hidden1':true})
  },
  tap1:function(){
     this.setData({'hidden1':false})
  }
})
           

3、toast

icon：图标

duration ：显示时间

4、progress

<progress percent="20" show-info/>
<progress percent="40" active/>
<progress percent="60" stroke-width="10"/>
<progress percent="80" color="#10AEFF"/>
           

5、checkbox

<checkbox-group bindchange="checkboxChange">
                <label class="checkbox" wx:for-items="{{items}}">
                    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
                </label>
            </checkbox-group>
           

6、form

<form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
        <view class="section section_gap">
            <view class="section__title">switch</view>
            <switch name="switch"/>
        </view>
        <view class="section section_gap">
            <view class="section__title">slider</view>
            <slider name="slider" show-value ></slider>
        </view>

        <view class="section">
            <view class="section__title">input</view>
            <input name="input" placeholder="please input here" />
        </view>
        <view class="section section_gap">
            <view class="section__title">radio</view>
            <radio-group name="radio-group">
                <label><radio value="radio1"/>radio1</label>
                <label><radio value="radio2"/>radio2</label>
            </radio-group>
        </view>
        <view class="section section_gap">
            <view class="section__title">checkbox</view>
            <checkbox-group name="checkbox">
                <label><checkbox value="checkbox1"/>checkbox1</label>
                <label><checkbox value="checkbox2"/>checkbox2</label>
            </checkbox-group>
        </view>
        <view class="btn-area">
            <button formType="submit">Submit</button>
            <button formType="reset">Reset</button>
        </view>
    </form>
           

7、picker

<view class="page__bd">
        <view class="section">
            <view class="section__title">地区选择器</view>
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
                <view class="picker">
                    当前选择：{{array[index]}}
                </view>
            </picker>
        </view>
        <view class="section">
            <view class="section__title">时间选择器</view>
            <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
                <view class="picker">
                    当前选择: {{time}}
                </view>
            </picker>
        </view>

        <view class="section">
            <view class="section__title">日期选择器</view>
            <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                <view class="picker">
                    当前选择: {{date}}
                </view>
            </picker>
        </view>
    </view>