uniapp简单实现一个不定高展开收缩组件

在uniapp中实现一个不定高的展开收缩组件，可以通过改变元素的显示状态来控制其高度。以下是一个简单的示例：

<template>
  <view>
    <view class="collapse" @click="toggle">
      <text>{{ isExpanded ? '收缩' : '展开' }}</text>
    </view>
    <view v-show="isExpanded" class="content">
      这里是可以展开和收缩的内容区域。
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isExpanded: false, // 控制内容区域的显示与隐藏
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
 
<style>
.collapse {
  padding: 10px;
  background-color: #f0f0f0;
  text-align: center;
  cursor: pointer;
}
.content {
  padding: 10px;
  border: 1px solid #ddd;
  border-top: none;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
</style>

在这个例子中，.collapse 是触发展开和收缩的按钮，.content 是可以展开和收缩的内容区域。通过点击 .collapse 切换 isExpanded 的值，v-show 指令负责根据 isExpanded 的值显示或隐藏 .content 区域。

注意，这里没有设置 .content 区域的固定高度，而是通过 v-show 控制显示与隐藏。不定高的部分会根据内容自动调整。