radio:
单选项目。
radio-group:
单项选择器,内部由多个<radio/>组成。
组件用法:
wxml
- <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
- 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
- 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-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 | 是否禁用 |