微信小程序 button、checkbox、radio组件

微信小程序的button、checkbox、radio三个组件都属于表单组件
官方参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

• button按钮
  
  button提供三种类型的按钮：基本类型(primary)、默认类型(default)、警告类型(warn);提供了两种大小形状：default、mini

以下是一个示例：

//WXML文件
<!--btn-->
<button type="default" size="{{defaultSize}}" loading="{{loading}}" 
plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" 
plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary 
</button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>

//js文件
//index.js
var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function (e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function (e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function (e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}
for (var i = 0; i < types.length; ++i) {
  (function (type) {
    pageObject[type] = function (e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' :
          'default'
      this.setData(changedData)
    }
  })(types[i])
}
Page(pageObject)

原始状态：

设置disable属性后：

设置plain属性后：

设置loading属性后：

• checkbox多项选择器
  
  checkbox就是复选框；而checkbox-group是用来容纳多个checkbox的容器，checkbox-group有一个绑定时间 bindchange，当选项改变时触发，detail={value:[选中的checkbox得到value数组]}
  示例：

//WXML文件
<!--checkbox-->
<checkbox-group bindchange="checkboxChange">
  <label wx:for="{{checkboxData}}">
    <checkbox value="{{item.value}}" checked="{{item.check}}">{{item.name}}</checkbox>
  </label>
</checkbox-group>
<text>{{checkboxText}}</text>

//js文件
Page({
data: {
checkboxData: [{ name: 'basketball', value: '篮球' ,check:'true'}, { name: 'soccer', value: '足球' }, { name: 'volleyball', value: '排球' }, { name: 'badminton', value: '羽毛球'}],
    checkboxText:''
},
checkboxChange:function(e){
    var text = e.detail.value;
    this.setData({checkboxText:'已经选的内容：'+text});
  }
})

效果：

• radio组件
  
  radio是和checkbox对立的一个组件，每次只能选一个选项，radio-group是用来容纳多个radio的容器，同样有一个bindchange事件，
  event.detail={value:选中的radio的value}
  示例：

//WXML文件
<!--radio-->
<radio-group bindchange="radioChange">
  <label wx:for="{{radioData}}">
    <radio value="{{item.value}}" checked="{{item.check}}">{{item.name}}</radio>
  </label>
</radio-group>
<text>{{radioText}}</text>

//js文件
Page({
data: {
radioData: [{ name: 'basketball', value: '篮球', check: 'true' }, { name: 'soccer', value: '足球' }, { name: 'volleyball', value: '排球' }, { name: 'badminton', value: '羽毛球' }],
    radioText: ''
},
radioChange:function(e){
    var text = e.detail.value;
    this.setData({radioText:'选中的内容：'+text});
}
})

效果：