微信小程序组件解读和分析:十三、radio单选项目
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 | 是否禁用 |
posted on 2017-03-28 22:56 微信开发--51小程序 阅读(2708) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步