radio-group 单项选择器组

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

# 属性说明

属性名 类型 默认值 必填 说明
bindchange EventHandle <radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项 radio 的 value}

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 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)
              }