• radio 单项选择器
  • 属性说明
  • 示例
    • 代码示例 1：默认样式
    • 代码示例 2：列表展示
    • 代码示例 3：包含禁用选项
    • 代码示例 4：默认不选中
    • 代码示例 5：自定义颜色
    • 业务示例：自定义大小

radio 单项选择器

解释：单项选择器。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN

 
 
 

  
  
  
<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：列表展示

• SWAN
• JS

 
 
 

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

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

• SWAN

 
 
 

  
  
  
<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：默认不选中

• SWAN

 
 
 

  
  
  
<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：自定义颜色

• SWAN

 
 
 

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

业务示例：自定义大小

• SWAN
• CSS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">自定义大小</view>
  
  
  
 <view class="block-area">
  
  
  
 <radio-group>
  
  
  
 <radio class="block radio-big border-bottom" checked>单选项一</radio>
  
  
  
 <radio class="block radio-small"><view class="radio-small-text">单选项二</view></radio>
  
  
  
 </radio-group>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>