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: 32rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; overflow: hidden;}.page__hd{ padding: 50rpx 50rpx 100rpx 50rpx; text-align: center;}.page__title{ display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC;}.page__desc{ display: none; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB;}.radio { display: block; margin-bottom: 20rpx;}.section{ margin-bottom: 80rpx;}.section_gap{ padding: 0 30rpx;} |
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 | 是否禁用 |