百度智能小程序 单项选择器组

radio-group 单项选择器组

解释：单项选择器组，内部由多个 radio 组成，代码示例与 radio 相同。

属性说明

示例 

在开发者工具中打开

代码示例 1: 默认样式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默认样式</view>
        <view class="block">
            <radio-group bindchange="radioChange">
                <radio value="radio1" checked>单选项一</radio>
                <radio value="radio2" class="block-before" checked="false">单选项二</radio>
            </radio-group>
        </view>
    </view>
</view>

代码示例 2: 列表展示

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">列表展示</view>
        <view class="block-area">
            <radio-group bindchange="radioChange">
                <radio s-for="item in items" value="{{item.value}}" class="block border-bottom" checked="{{item.checked}}">{{item.text}}</radio>
            </radio-group>
        </view>
    </view>
</view>

Page({
    data: {
        items: [
            {
                value: 'radio1',
                text: '单选项一',
                checked: true
            },
            {
                value: 'radio2',
                text: '单选项二',
                checked: false
            },
            {
                value: 'radio3',
                text: '单选项三',
                checked: false
            }
        ]
    },
    radioChange: e => {
        console.log(e.detail);
    }
});

代码示例 3: 包含禁用选项

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>包含禁用选项</view>
            <view>disabled</view>
        </view>
        <view class="block-area">
            <radio-group>
                <radio class="block border-bottom" checked>可用选项</radio>
                <radio class="block border-bottom" checked="false">可用选项</radio>
                <radio class="block" checked="false" disabled>
                    <text class="disabledText">禁用选项</text>
                </radio>
            </radio-group>
        </view>
    </view>
</view>

代码示例 4: 默认不选中

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>默认不选中</view>
            <view>checked="false"</view>
        </view>
        <view class="block-area">
            <radio-group>
                <radio class="block border-bottom" checked>单选项一</radio>
                <radio class="block border-bottom" checked="false">单选项二</radio>
            </radio-group>
        </view>
    </view>
</view>

代码示例 5: 自定义颜色

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义颜色</view>
            <view>color="#00BC89"</view>
        </view>
        <view class="block-area">
            <radio-group>
                <radio class="block border-bottom" color="#00BC89" checked>单选项一</radio>
                <radio class="block border-bottom" color="#00BC89">单选项二</radio>
            </radio-group>
        </view>
    </view>
</view>

参考示例

参考示例 1: 改变小程序基础组件大小,拿 radio 举例，其他组件也适用 

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">改变小程序原生组件大小</view>
            <radio-group class="radioSmall">
                <radio checked class="radio1">单选项一</radio>
                <radio checked="false" class="radio2">单选项二</radio>
            </radio-group>
        </view>
    </view>
</view>

.radioSmall {
    transform: scale(0.7)
}