微信小程序（七）

button

主要属性size（默认宽度100%），type（样式），plain（镂空），loading（在跟后台交互的时候可以显示），form-type（submit/reset，提交表单或重置表单）

<button>按钮</button>
<button size='mini'>按钮</button>
<button size='mini' type='primary'>按钮</button>
<button size='mini' type='warn'>按钮</button>
<button size='mini' type='warn' plain='true'>按钮</button>
<button size='mini' type='warn' plain='true' loading='true'>按钮</button>
<button size='mini'  hover-class='press'>按钮</button>

checkbox

lable可以与checkbox一起使用，通过for控制checkbox选中状态。checkbox需要checkbox-group。

//js
checkboxData:[
      { id:'1001',name: "中国", value: 'v中国', disabled: false, color: 'red', checked: true},
      { id: '1002',name: "美国", value: 'v美国', disabled: false, color: 'green', checked: false },
      { id: '1003',name: "俄罗斯", value: 'v俄罗斯', disabled: false, color: 'blue', checked: false },
    ]
    
change:function(e){
    console.log(e.detail.value)//可以获得当前checkbox中选中的value
  }    
//wxml
<checkbox-group bindchange='change'>
    <label wx:for="{{checkboxData}}">
      <checkbox id='{{item.id}}' value='{{item.value}}' disabled='{{item.disabled}}' color='{{item.color}}'
      checked='{{item.checked}}'>{{item.name}}</checkbox>
    </label>
</checkbox-group>
<label for="1001">点击测试</label>

form

在form中要有button提交，button重置，这两个按钮点击会触发bindsubmit，bindreset绑定的事件，注意form表单中的控件需要有name，不然e.detail.value中是没有值的。

//js
formSubmit:function(e){
      debugger
  },
  formReset:function(){
    console.log("重置")
  }

//wxml
<form bindsubmit='formSubmit' bindreset='formReset'>
  <checkbox-group bindchange='change' name='nation'>
      <label wx:for="{{checkboxData}}">
        <checkbox id='{{item.id}}' value='{{item.value}}' disabled='{{item.disabled}}' color='{{item.color}}'
        checked='{{item.checked}}'>{{item.name}}</checkbox>
      </label>
  </checkbox-group>

  <button form-type='submit'>提交</button>
    <button form-type='reset'>重置</button>

</form>