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

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

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

以下是一个示例&＃xff1a;

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


//js文件
//index.js
var types &＃61; [&＃39;default&＃39;, &＃39;primary&＃39;, &＃39;warn&＃39;]
var pageObject &＃61; {data: {defaultSize: &＃39;default&＃39;,primarySize: &＃39;default&＃39;,warnSize: &＃39;default&＃39;,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 &＃61; 0; i < types.length; &＃43;&＃43;i) {(function (type) {pageObject[type] &＃61; function (e) {var key &＃61; type &＃43; &＃39;Size&＃39;var changedData &＃61; {}changedData[key] &＃61;this.data[key] &＃61;&＃61;&＃61; &＃39;default&＃39; ? &＃39;mini&＃39; :&＃39;default&＃39;this.setData(changedData)}})(types[i])
}
Page(pageObject)

原始状态&＃xff1a;

设置disable属性后&＃xff1a;

设置plain属性后&＃xff1a;

设置loading属性后&＃xff1a;

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

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


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


效果&＃xff1a;

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

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


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


效果&＃xff1a;