微信小程序组件 checkbox-group 和 radio-group checkbox和radio 的关系

效果图

 

 

1.wxml

<template name="ask">
  <radio-group class="mb-20">
    <label class="x-ask-label">
      <view class="x-question">
        <view>q</view>
        <view class="text">{{q}}</view>
        <view class="icon-ask-down"></view>
      </view>
      <view class="x-answer">
        <view>a</view>
        <view class="text">{{a}}</view>
      </view>
      <checkbox hidden="{{false}}" />
    </label>
  </radio-group>
</template>


<!-- checkbox标签，可以勾选上再取消勾选，radio不可以 -->

<!-- checkbox在radio-group下会变成单选，在checkbox-group下才是多选 -->

<!-- radio在checkbox-group下也会变成多选，在radio-group下才会是单选 -->

<!-- radio和checkbox是否单选和多选取决于是在checkbox-group和radio-group -->

<!-- 你可以试试，不同的表现差异 -->
<!-- 用这个差异，可以做很多的，这个收缩展开的效果 -->

<!-- <template name="ask">
  <radio-group class="mb-20">
    <label class="x-ask-label">
      <view class="x-question">
        <view>q</view>
        <view class="text">{{q}}</view>
        <view class="icon-ask-down"></view>
      </view>
      <view class="x-answer">
        <view>a</view>
        <view class="text">{{a}}</view>
      </view>
      <radio hidden="{{false}}" />
    </label>
  </radio-group>
</template> -->



<template is="ask" data="{{q:'问题1',a:'问题1回答'}}" />
<template is="ask" data="{{q:'问题2',a:'问题2回答'}}" />
<template is="ask" data="{{q:'问题3',a:'问题3回答'}}" />
<template is="ask" data="{{q:'问题4',a:'问题4回答'}}" />

2.wxss

.x-question,
.x-answer {
  display: flex;
}

.text {
  margin-left: 20rpx;
}

.icon-ask-down {
  background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.13 4.463L6.686 8.908a.857.857 0 0 1-1.213 0L1.03 4.463A.857.857 0 0 1 2.24 3.251L6.08 7.09l3.837-3.838a.857.857 0 0 1 1.212 1.212z' fill='%23A59D8F' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
  width: 24rpx;
  height: 24rpx;
  margin-left: 20rpx;
}

.mb-20 {
  margin-bottom: 40rpx;
}

.x-ask-label[aria-checked='true'] .x-answer {
  display: flex;
}

.x-ask-label[aria-checked='true'] .icon-ask-down {
  transform: rotateZ(180deg);
}

.x-ask-label[aria-checked='false'] .x-answer {
  display: none;
}