微信小程序文本收起展开

这里写自定义目录标题

微信小程序文本收起展开
- 常见问题的梯形背景框

微信小程序文本收起展开

参考 https://juejin.cn/post/6963904955262435336

typescript 复制代码

<!-- 常见问题解答  -->
  <view class='contentBottom'>
    <view class='BottomFirst'>
      <text id='0' data-id='0' class="tag-title">常见问题解答</text>
    </view>
    <view class="one-question" wx:for="{{questionList}}" wx:key="index">
      <view class="question-hr">
        <view class="question-1">问</view>{{item.q}}
      </view>
      <view class="question-hr">
        <view class="question-2">答</view>
        <div class="wrapper">
          <div class="text {{item.checkboxClass}}" >
            <label class="btn" bind:tap="changText" data-id="{{index}}"></label>
            {{item.a}}
          </div>
        </div>
      </view>
    </view>
  </view>

javascript 复制代码

  data: {
    questionList: [{
      checkboxClass:'',
      checkbox:false,
      q: '什么是临床试验',
      a: "临床试验是评估新药和新的治疗方案是否有效并能达到预期目的的实验过程。它们也被用于评估外科手术、放疗以及综合治疗方案的有效性。虽然许多临床试验能够取得成功，但并非所有试验都能达到预期的效果。临床试验通常分为四个阶段。1、 第一阶段： 这是将新的治疗方法应用于人体之前的第一步。 在第一阶段临床试验之前， 这项试验已经在实验室中反复确认其安全性和有效性。 第一阶段试验通常是在一小群标准治疗无效的患者中进行的。 目的是确定新药或新方案的治疗效果、 有效剂量以及不良反应。 初始剂量一般比较低， 然后在确保患者安全的情况下逐渐增加剂量。 2、 第二阶段： 如果一项治疗方法通过了第一阶段临床试验， 那么它就可以进入第二阶段临床试验。 这些试验仍然针对那些常规治疗无效的患者。 目的是确定药物的剂量效应曲线， 这通常需要更多患者的参与。3、 第三阶段： 在这一阶段， 新的治疗方法与标准治疗方法进行比较， 新药与目前的标准药物进行比较。 患者被随机分入新治疗组和标准治疗组， 通常情况下无论是患者还是医师都不知道分组的情况， 也不知道治疗是否有效。4、 第四阶段： 在新药经过国家食品药品监督管理局（ SFDA） 批准之后， 该药才能应用于患者， 但还必须进行第四期临床试验的监控。 这一阶段可能会发现罕见的不良反应， 有时， 药物的治疗范围也可能需要修改。 "
    },{
      checkboxClass:'',
      checkbox:false,
      q:'临床试验为什么免费',
      a:"‌‌药物和检查费用免费‌：绝大多数临床试验都会免费提供试验药物和检查，患者无需承担这些费用。经济负担减轻‌：参加临床试验可以大大减轻患者的经济负担，特别是对于经济状况不佳的患者，这是一种重要的治疗选择。‌‌新药和治疗方法的机会‌：患者有可能获得未上市的新药和治疗机会，这些药物在国外已经应用，疗效和安全性已经得到验证。‌伦理考量‌：确保每位患者都能平等获得最新的治疗机会，是医学伦理的重要体现。免费提供服务降低了参与门槛，让更多人受益。‌科研资助‌：临床试验通常由‌制药公司、‌政府机构或非营利组织资助，它们投入大量资金以推动医学进步。受试者的权益保障自愿参与‌：患者参加临床试验是自愿的，被充分告知风险与获益并签署知情同意书后方可进入临床试验的研究。‌权益保护‌：受试者在临床试验期间的权益与安全将会得到保障，发生与临床试验相关的损害能得到及时的免费救治与相应的赔偿。补偿机制‌：受试者可以获得适当的补偿，包括营养补助、交通补助等。伦理委员会监督‌：研究者开展临床试验都要获得医院伦理委员会的同意，确保受试者的权益和安全。"
    }],
  },

css 复制代码

.one-question {
  margin-bottom: 20rpx;
  border-bottom: 1px solid #efefee;
  font-size: 30rpx;
}

.one-question .question-hr {
  display: flex;
  margin-bottom: 10rpx;
}

.one-question .question-hr .question-1 {
  color: white;
  background-color: #F05B5B;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
  height: 40rpx;
}

.one-question .question-hr .question-2 {
  color: white;
  background-color: #00C8C8;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
  height: 40rpx;
}

.wrapper {
  display: flex;
  overflow: hidden;
}

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
}

.text::before {
  content: '';
  height: calc(100% - 36rpx);
  float: right;
}

.text::after {
  content: '';
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
  margin-left: -100rpx;
}

.btn {
  float: right;
  clear: both;
  margin-left: 10rpx;
  font-size: 28rpx;
  padding: 5rpx 12rpx;
  background: #00C8C8;
  line-height: 30rpx;
  border-radius: 4rpx;
  color: #fff;
  cursor: pointer;
}

.btn::before {
  content: '展开'
}

.show {
  -webkit-line-clamp: 999;
}

.show::after {
  visibility: hidden;
}

.show .btn::before {
  content: '收起'
}

常见问题的梯形背景框

css 复制代码

.contentBottom {
  margin: 20rpx;
  padding: 0 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  border-radius: 10rpx;
}

.BottomFirst {
  width: 350rpx;
  height: 60rpx;
  display: flex;
  justify-content: space-around;
  background-color: #FECC9F;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

.BottomFirst::before {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  left: -60rpx;
  top: 0rpx;
  border-bottom: 60rpx solid rgba(0, 0, 0, 0);
  border-left: 60rpx solid rgba(0, 0, 0, 0);
  border-right: 60rpx solid rgba(0, 0, 0, 0);
  border-top: 60rpx solid #FECC9F;
}

.BottomFirst::after {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  right: -60rpx;
  top: 0rpx;
  border-bottom: 60rpx solid rgba(0, 0, 0, 0);
  border-left: 60rpx solid rgba(0, 0, 0, 0);
  border-right: 60rpx solid rgba(0, 0, 0, 0);
  border-top: 60rpx solid #FECC9F;
}

.BottomFirst text {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  line-height: 60rpx;
  border-right: 1px solid #00C8C8;
  box-sizing: border-box;
  color: #6d3f06;
}

.BottomFirst text:nth-child(1) {
  border: none;
}