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

点击查看原文