radio
单选项目。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| value | String | 否 | radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value | ||
| checked | Boolean | false | 否 | 当前是否选中 | |
| disabled | Boolean | false | 否 | 是否禁用 | |
| color | Color | #00cac4 | 否 | radio的颜色，同css的color |
radio-group
单项选择器，内部由多个 radio 组成。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| bindchange | EventHandle | 否 | radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]} |
示例代码：
<!--pages/component/pages/radio/radio.mcml-->
<view class="container">
<view class="statement">单选按钮。</view>
<view class="cssname">checked</view>
<view>
<radio checked="true">选项一</radio>
<radio>选项二</radio>
</view>
<view class="cssname">disabled</view>
<view>
<radio disabled="true" checked="true">选项一</radio>
<radio disabled="true">选项二</radio>
</view>
<view class="cssname">color</view>
<view>
<radio checked="true" color="red">红色</radio>
<radio checked="true" color="blue">蓝色</radio>
</view>
<view class="cssname">radio-group：内部由多个radio组成</view>
<view>
<radio-group bindchange="bindchange">
<radio color="red" checked="{{checkRed}}" value="red">红色</radio>
<radio color="yellow" disabled="{{redChecked}}" value="yellow" checked="true">黄色</radio>
<radio color="blue" value="blue">蓝色</radio>
<radio color="green" value="green">绿色</radio>
</radio-group>
</view>
<button bindtap="redcheckTap">选中红色</button>
<view class="cssname">bindchange：radio-group事件, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{detail}}</text>
</view>
// pages/component/pages/radio/radio.js
Page({
data: {
detail: '',
dd: true
},
bindchange: function (e) {
this.setData({
detail: JSON.stringify(e, null, 2),
redChecked : e.detail.value == 'red'
})
},
redcheckTap: function(){
this.setData({
checkRed: true
})
}
})