radio单选项目组件说明:
radio:单选项目。
radio-group：
单项选择器，内部由多个<radio/>组成。
radio单选项目示例代码运行效果如下：
下面是WXML代码：
[XML]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<
view
class
=
"page"
>
<
view
class
=
"page__hd"
>
<
text
class
=
"page__title"
>radio</
text
>
<
text
class
=
"page__desc"
>单选框</
text
>
</
view
>
<
view
class
=
"page__bd"
>
<
view
class
=
"section section_gap"
>
<
radio-group
class
=
"radio-group"
bindchange
=
"radioChange"
>
<
label
class
=
"radio"
wx:for
=
"{{items}}"
>
<
radio
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
/>{{item.value}}
</
label
>
</
radio-group
>
</
view
>
</
view
>
</
view
>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
Page({
data: {
items: [
{name:
'USA'
, value:
'美国'
},
{name:
'CHN'
, value:
'中国'
, checked:
'true'
},
{name:
'BRA'
, value:
'巴西'
},
{name:
'JPN'
, value:
'日本'
},
{name:
'ENG'
, value:
'英国'
},
{name:
'FRA'
, value:
'法国'
},
]
},
radioChange:
function
(e) {
console.log(
'radio发生change事件，携带value值为：'
, e.detail.value)
}
})
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
page {
min-height
:
100%
;
flex:
1
;
background-color
:
#FBF9FE
;
font-size
:
32
rpx;
font-family
: -apple-system-font,
Helvetica
Neue,
Helvetica
,
sans-serif
;
overflow
:
hidden
;
}
.page__hd{
padding
:
50
rpx
50
rpx
100
rpx
50
rpx;
text-align
:
center
;
}
.page__title{
display
: inline-
block
;
padding
:
20
rpx
40
rpx;
font-size
:
32
rpx;
color
:
#AAAAAA
;
border-bottom
:
1px
solid
#CCCCCC
;
}
.page__desc{
display
:
none
;
margin-top
:
20
rpx;
font-size
:
26
rpx;
color
:
#BBBBBB
;
}
.radio {
display
:
block
;
margin-bottom
:
20
rpx;
}
.section{
margin-bottom
:
80
rpx;
}
.section_gap{
padding
:
0
30
rpx;
}
|
radio单选项目的主要属性：
radio-group:
|
属性名
|
类型
|
默认值
|
说明
|
| bindchange | EventHandle | <radio-group/>中的选中项发生变化时触发change事件，event.detail = {value: 选中项radio的value} |
radio:
|
属性名
|
类型
|
默认值
|
说明
|
| value | String | <radio/>标识。当该<radio/>选中时，<radio-group/>的change事件会携带<radio/>的value | |
| checked | Boolean | false | 当前是否选中 |
| disabled | Boolean | false | 是否禁用 |