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 | 是否禁用 |