radio-group

单项选择器，内部由多个组成。

属性名类型默认值说明
bindchangeEventHandle 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

radio

单选项目

属性名类型默认值说明
valueString 标识。当该 选中时， 的 change 事件会携带的value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
colorColorradio的颜色，同css的color

示例

  3. <view class="container">
  5.   <view class="page-body">
  6.     <view class="page-section page-section-gap">
  7.       <view class="page-section-title">默认样式</view>
  8.       <label class="radio">
  9.         <radio value="r1" checked="true"/>选中
  10.       </label>
  11.       <label class="radio">
  12.         <radio value="r2" />未选中
  13.       </label>
  14.     </view>
  17.     <view class="page-section">
  18.       <view class="page-section-title">推荐展示样式</view>
  19.       <view class="page-cells page-cells_after-title">
  20.         <radio-group bindchange="radioChange">
  21.           <label class="page-cell page-check__label" :for="{{items}}" :key="{{item.value}}">
  23.             <view class="page-cell__hd">
  24.               <radio value="{{item.value}}"
  25.                 checked="{{ item.checked }}"/>
  26.             </view>
  27.             <view class="page-cell__bd">{{item.name}}</view>
  28.           </label>
  29.         </radio-group>
  30.       </view>
  31.     </view>
  32.   </view>
  34. </view>
  1. Page({
  2.   data: {
  3.     items: [
  4.       {value: 'xigua', name: '西瓜视频'},
  5.       {value: 'toutiao', name: '今日头条', checked: 'true'},
  6.       {value: 'huoshan', name: '火山小视频'},
  7.       {value: 'douyin', name: '抖音'},
  8.       {value: 'duanzi', name: '内涵段子'},
  9.       {value: 'flipgaram', name: 'Flipagram'},
  10.     ]
  11.   },
  12.   radioChange: function(e) {
  13.     console.log('Radio 发生 change 事件，value 值为：', e.detail.value)
  15.     var items = this.data.items;
  16.     for (var i = 0, len = items.length; i < len; ++i) {
  17.       items[i].checked = items[i].value == e.detail.value
  18.     }
  20.     this.setData({
  21.       items: items
  22.     });
  23.   }
  24. })

radio-group - 图1

原文: https://developer.toutiao.com/docs/comp/radio.html