【第五节：微信小程序 小程序UI组件B】微信小程序入门，以思维导图的方式展开5

上图若是看不清，可私信给发大图哈 

5、小程序UI组件B

表单form

    button    按钮
        size    String    default    有效值 default, mini
        type    String    default    按钮的样式类型，有效值 primary, default, warn
        plain    Boolean    false    按钮是否镂空，背景色透明
        disabled    Boolean    false    是否禁用
        loading    Boolean    false    名称前是否带 loading 图标
        form-type    String    无    有效值：submit, reset，用于 <form/> 组件，点击分别会触发 submit/reset 事件
        open-type    String    无    有效值：contact，打开客服会话
        hover-class    String    button-hover    指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
        hover-start-time    Number    20    按住后多久出现点击态，单位毫秒
        hover-stay-time    Number    70    手指松开后点击态保留时间，单位毫秒
    form    表单
        report-submit    Boolean    是否返回 formId 用于发送模板消息
        bindsubmit    EventHandle    携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
        bindreset    EventHandle    表单重置时会触发 reset 事件
    input    输入框
        value    String        输入框的初始内容
        type    String    "text"    input 的类型，有效值："text", "number", "idcard", "digit"
        password    Boolean    false    是否是密码类型
        placeholder    String        输入框为空时占位符
        placeholder-style    String        指定 placeholder 的样式
        placeholder-class    String    "input-placeholder"    指定 placeholder 的样式类
        disabled    Boolean    false    是否禁用
        maxlength    Number    140    最大输入长度，设置为 -1 的时候不限制最大长度
        cursor-spacing    Number    0    指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
        auto-focus    Boolean    false    (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
        focus    Boolean    false    获取焦点
        confirm-type    String    "done"    设置键盘右下角按钮的文字，有效值： "send","search","next","go","done"
        confirm-hold    Boolean    false    点击键盘右下角按钮时是否保持键盘不收起
        bindinput    EventHandle        当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
        bindfocus    EventHandle        输入框聚焦时触发，event.detail = {value: value}
        bindblur    EventHandle        输入框失去焦点时触发，event.detail = {value: value}
        bindconfirm    EventHandle        点击完成按钮时触发，event.detail = {value: value}
    checkbox    多项选择器
        bindchange    EventHandle        <checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
    radio    单项选择器
        radio-group
            bindchange    EventHandle        <radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
        value    String        <radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
        checked    Boolean    false    当前是否选中
        disabled    Boolean    false    是否禁用
        color    Color        radio的颜色，同css的color
    picker    列表选择器
        普通选择器：mode = selector
            range    Array / Object Array    []    mode为 selector 时，range 有效
            range-key    String        当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
            value    Number    0    value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
            bindchange    EventHandle        value 改变时触发 change 事件，event.detail = {value: value}
            disabled    Boolean    false    是否禁用
        时间选择器：mode = time
            value    String        表示选中的时间，格式为"hh:mm"
            start    String        表示有效时间范围的开始，字符串格式为"hh:mm"
            end    String        表示有效时间范围的结束，字符串格式为"hh:mm"
            bindchange    EventHandle        value 改变时触发 change 事件，event.detail = {value: value}
            disabled    Boolean    false    是否禁用
        日期选择器：mode = date
            value    String    0    表示选中的日期，格式为"YYYY-MM-DD"
            start    String        表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
            end    String        表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
            fields    String    day    有效值 year,month,day，表示选择器的粒度
            bindchange    EventHandle        value 改变时触发 change 事件，event.detail = {value: value}
            disabled    Boolean    false    是否禁用
    picker-view    内嵌列表选择器
        value    Number Array        数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
        indicator-style    String        设置选择器中间选中框的样式
        indicator-class    String        设置选择器中间选中框的类名
        bindchange    EventHandle        当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
    slider    滚动选择器
        min    Number    0    最小值
        max    Number    100    最大值
        step    Number    1    步长，取值必须大于 0，并且可被(max - min)整除
        disabled    Boolean    false    是否禁用
        value    Number    0    当前取值
        color    Color    #e9e9e9    背景条的颜色（请使用 backgroundColor）
        selected-color    Color    #1aad19    已选择的颜色（请使用 activeColor）
        activeColor    Color    #1aad19    已选择的颜色
        backgroundColor    Color    #e9e9e9    背景条的颜色
        show-value    Boolean    false    是否显示当前 value
        bindchange    EventHandle        完成一次拖动后触发的事件，event.detail = {value: value}
    switch    开关选择器
        checked    Boolean    false    是否选中
        type    String    switch    样式，有效值：switch, checkbox
        bindchange    EventHandle        checked 改变时触发 change 事件，event.detail={ value:checked}
        color    Color        switch 的颜色，同 css 的 color
    label    标签
        for    String    绑定控件的 id
    textarea   多行输入框
        value    String        输入框的内容
        placeholder    String        输入框为空时占位符
        placeholder-style    String        指定 placeholder 的样式
        placeholder-class    String    textarea-placeholder    指定 placeholder 的样式类
        disabled    Boolean    false    是否禁用
        maxlength    Number    140    最大输入长度，设置为 -1 的时候不限制最大长度
        auto-focus    Boolean    false    自动聚焦，拉起键盘。
        focus    Boolean    false    获取焦点
        auto-height    Boolean    false    是否自动增高，设置auto-height时，style.height不生效
        fixed    Boolean    false    如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
        cursor-spacing    Number    0    指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
        bindfocus    EventHandle        输入框聚焦时触发，event.detail = {value: value}
        bindblur    EventHandle        输入框失去焦点时触发，event.detail = {value: value}
        bindlinechange    EventHandle        输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
        bindinput    EventHandle        当键盘输入时，触发 input 事件，event.detail = {value: value}， bindinput 处理函数的返回值并不会反映到 textarea 上
        bindconfirm    EventHandle        点击完成时， 触发 confirm 事件，event.detail = {value: value}