字节跳动小程序开发组件文档 radio-group

由 卓别林 创建, 最后一次修改 2019-08-09

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

属性名 类型 默认值 说明 最低版本
bindchange EventHandle 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value} 1.0.0

radio


单选项目

属性名 类型 默认值 说明 最低版本
value String 标识。当该  选中时,  的 change 事件会携带 的value 1.0.0
checked Boolean false 当前是否选中 1.0.0
disabled Boolean false 是否禁用 1.0.0
color Color radio的颜色,同css的color 1.0.0

示例

开发者工具中预览



<view class="container">

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <label class="radio">
        <radio value="r1" checked="true"/>选中
      </label>
      <label class="radio">
        <radio value="r2" />未选中
      </label>
    </view>


    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="page-cells page-cells_after-title">
        <radio-group bindchange="radioChange">
          <label class="page-cell page-check__label" :for="{{items}}" :key="{{item.value}}">

            <view class="page-cell__hd">
              <radio value="{{item.value}}"
                checked="{{ item.checked }}"/>
            </view>
            <view class="page-cell__bd">{{item.name}}</view>
          </label>
        </radio-group>
      </view>
    </view>
  </view>

</view>

Page({
  data: {
    items: [
      {value: 'xigua', name: '西瓜视频'},
      {value: 'toutiao', name: '今日头条', checked: 'true'},
      {value: 'huoshan', name: '火山小视频'},
      {value: 'douyin', name: '抖音'},
      {value: 'duanzi', name: '内涵段子'},
      {value: 'flipgaram', name: 'Flipagram'},
    ]
  },
  radioChange: function(e) {
    console.log('Radio 发生 change 事件,value 值为:', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})


以上内容是否对您有帮助:
二维码
建议反馈
二维码