百度智能小程序 單項選擇器組

radio-group 單項選擇器組

解釋：單項選擇器組，內(nèi)部由多個 radio 組成，代碼示例與 radio 相同。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例 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: 改變小程序基礎(chǔ)組件大小,拿 radio 舉例，其他組件也適用 

在開發(fā)者工具中打開

<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)
}