微信小程序-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">点击弹出默认maskbutton>

mask.js

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

3、toast

<toast hidden="{{toast3Hidden}}" icon="warn" duration="3000" bindchange="toast3Change">

icon：图标
duration ：显示时间

4、progress

percent="20" show-info/>
percent="40" active/>
percent="60" stroke-width="10"/>
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">switchview>
            <switch name="switch"/>
        view>
        <view class="section section_gap">
            <view class="section__title">sliderview>
            <slider name="slider" show-value >slider>
        view>

        <view class="section">
            <view class="section__title">inputview>
            <input name="input" placeholder="please input here" />
        view>
        <view class="section section_gap">
            <view class="section__title">radioview>
            <radio-group name="radio-group">
                <label><radio value="radio1"/>radio1label>
                <label><radio value="radio2"/>radio2label>
            radio-group>
        view>
        <view class="section section_gap">
            <view class="section__title">checkboxview>
            <checkbox-group name="checkbox">
                <label><checkbox value="checkbox1"/>checkbox1label>
                <label><checkbox value="checkbox2"/>checkbox2label>
            checkbox-group>
        view>
        <view class="btn-area">
            <button formType="submit">Submitbutton>
            <button formType="reset">Resetbutton>
        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>