uniapp 内容展开组件

tingkeiii2023-09-25 13:14

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

效果展示：

代码：（vue3版本）

javascript 复制代码

<template>
  <view class="collapse-view">
    <view class="collapse-content">
      <swiper
        :autoplay="false"
        :circular="true"
        :indicator-dots="false"
        :style="{
          width: '100%',
          height: calcHeight(),
        }"
        class="collapse-swiper"
        @change="changeSwp"
      >
        内容区域
      </swiper>
      <view class="mode-change" @click="changeMode">
        <!-- 上下展开的小图标-->

        <uni-icons
          v-if="isCollapse"
          type="bottom"
          size="18"
          color="#165dff"
        ></uni-icons>
        <uni-icons v-else type="top" size="18" color="#165dff"></uni-icons>
      </view>
    </view>
  </view>
</template>

<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版本的逻辑片段

javascript 复制代码

<script>
export default {
  props: {},

  computed: {
//结构部分直接写 calcHeight来调用。不要()
    calcHeight() {
      //默认高度
      let h = "70rpx";
      if (!this.isCollapse) {
       //展开后高度
        h = 190 + "rpx";
      }
      return h;
    },
  },
  data() {
    return {
      isCollapse: true, //展开与折叠控件
    };
  },
  methods: {
    changeMode() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
    
</script>