代碼Github地址
一. 屬性說明
屬性名 |
類型 |
默認(rèn)值 |
說明 |
bindchange |
EventHandle |
|
<radio-group/> 中的選中項(xiàng)發(fā)生變化時(shí)觸發(fā) change 事件,event.detail = {value: 選中項(xiàng)radio的value} |
屬性名 |
類型 |
默認(rèn)值 |
說明 |
value |
String |
|
<radio/> 標(biāo)識(shí)盾致。當(dāng)該<radio/> 選中時(shí)言津,<radio-group/> 的 change 事件會(huì)攜帶<radio/>的value |
checked |
Boolean |
false |
當(dāng)前是否選中 |
disabled |
Boolean |
false |
是否禁用 |
color |
Color |
|
radio的顏色,同css的color |
二. 代碼
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio class="radio" value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />{{item.value}}
</label>
</radio-group>
<text>{{seleted}}</text>
.radio-group {
display: flex;
flex-direction: column;
align-items: center;
}
.radio {
margin-top: 20px;
}
*js
Page({
data: {
items: [
{ name: 'USA', value: '美國(guó)', disabled: true},
{ name: 'CHN', value: '中國(guó)', checked: true },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國(guó)' },
{ name: 'TUR', value: '法國(guó)' },
],
seleted : ""
},
radioChange: function (e) {
console.log('radio發(fā)生change事件进副,攜帶value值為:', e.detail.value)
let value = e.detail.value;
this.setData({
seleted : "選中的value:" + value
})
}
})