radio

基礎(chǔ)庫 1.0.0 開始支持本組件。

單選項(xiàng)目。

屬性說明

效果示例

代碼示例

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默認(rèn)樣式</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: "內(nèi)涵段子" },
      { value: "flipgaram", name: "Flipagram" }
    ]
  },
  radioChange: function(e) {
    console.log("Radio 發(fā)生 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
    });
  }
});