微信小程序组件解读和分析：十三、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	是否禁用

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637489.html