uniapp 内容展开组件

uni-collapse折叠面板并不符合需求，需要自己写一个。

效果展示：

代码： （vue3版本）

 
<script setup>
import {ref,reactive} from 'vue'
let isCollapse =ref(true) //是否展开控件
// 计算组件内容区域的高度
const calcHeight = () =>{
  //默认高度
  let h = "70rpx";
  if (!isCollapse.value) {
    //展开后高度
    h = 190 + "rpx";
  }
  return h;
}
//切换展开与否
const changeMode =()=>{
  isCollapse.value =!isCollapse.value
}
script>
<style lang="scss" scoped>
.collapse-view {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-top: 20rpx;
 
  swiper {
    width: 100%;
    height: 60upx;
  }
  .collapse-content {
    padding-bottom: 26rpx;
    border-bottom: 1upx solid #f7f7f7;
    border-bottom-left-radius: 37upx;
    border-bottom-right-radius: 37upx;
  }
  .collapse-swiper {
    min-height: 70upx;
    transition: height ease-out 0.3s;
  }
  .mode-change {
    display: flex;
    justify-content: center;
    margin-top: 10upx;
    margin-bottom: 22upx;
 
    :deep(.uni-icons) {
      position: absolute;
    }
  }
}
style>

vue2版本的 逻辑片段