使用微信小程序组件 template 配合 radio-group label checkbox 封装展开收起的操作

效果图

 1.wxml

 <view class="problem">
    <view style="text-align: center" class="mt-20 mb-20">
      <image style="width: 400rpx;" webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/problem-title.webp" mode="widthFix" />
    </view>
    <block wx:if="{{true}}">
      <template is="ask" data="{{q:'是否需要预约？',a:'需要哦，因为是专科医生操作，所以请提前3-5天预约。'}}" />
      <template is="ask" data="{{q:'是会否出报告？报告是纸质还是电子版的？',a:'来体检的动物，会提供电子版的报告（PDF或照片），如需要纸质报告，请在体检前告知医生，以便及时为您准备好。 '}}" />
      <template is="ask" data="{{q:'报告是现场给吗？',a:'一般我们会1-3个工作日提供心超报告，其余报告可以当时提供。 '}}" />
      <template is="ask" data="{{q:'我的猫狗需要提前准备什么吗？',a:'正常情况不需要；如果猫咪容易应激，请在预约时告知客服，并听取医生的建议，提前做相关的准备。'}}" />
      <template is="ask" data="{{q:'我的猫狗体检的时候，我可以在旁边吗？',a:'有些操作主人是可以陪伴的；有些要根据主人在旁边时动物配合的实际情况，医生会给与主人是否回避的原因和建议。'}}" />
      <template is="ask" data="{{q:'我的猫狗刚刚做过检查，我可以不重复做同样的检查吗？',a:'可以在预约时告知具体情况，客服或医生可能会请您携带有关检查报告，并根据实际情况有针对性、有选择的告知您，具体怎么安排对动物最友善、对诊断也最合适。 '}}" />
      <template is="ask" data="{{q:'我的猫狗在检查过程中发现有比较严重的问题，怎么办？',a:'作设有心内专科、外科专科的综合性医院，即便是基础体检过程中，发现有重大疑点或问题，院内专家团队都会加入会诊并共同制定接下来的检查、诊断、治疗方案。一站式的全面专业服务，是我们的特色和优势。 '}}" />
    </block>
  </view>


  <template name="ask">
    <!-- 单项选择器，内部由多个 radio 组成 -->
    <radio-group class="mb-20 b font-14 x-ask-radio-group ">
      <label class=" x-ask-label">
        <view class="x-question">
          <view class="flex">
            <view style="margin-top: 5rpx;">
              <image style="width: 32rpx; height: 32rpx;" webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp" mode="widthFix" />
            </view>
            <view class="text pr-10">{{q}}</view>
          </view>
          <view class="icon-ask-down"></view>
        </view>
        <!-- 回答 -->
        <view class="x-answer color-827968 font-14 regular pr-20 mt-10">
          <view>
            <image style="width: 32rpx; height: 32rpx; margin-top: 5rpx; " webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp" mode="widthFix" />
          </view>
          <view class="text">
            <view>{{a}}</view>
            <view>{{b}}</view>
          </view>
        </view>
        <checkbox hidden />
      </label>
    </radio-group>
  </template>

 wxss

 .flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.pr-10 {
  padding-right: 20rpx;
}

.pr-20 {
  padding-right: 40rpx;
}

.mt-10 {
  margin-top: 20rpx;
}






.x-ask-radio-group {
  border-bottom: 2px solid #F5F3ED;
  padding-bottom: 40rpx;
}

.x-question {
  display: flex;
  justify-content: space-between;
}


.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 !important;
  height: 24rpx;
}

.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;
}


.problem {
  min-height: 0rpx;
  background-color: #fff;
  margin: 20rpx;
  margin-top: 40rpx;
  border-radius: 40rpx;
  padding: 34rpx;
}