在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 控制显示与隐藏。不定高的部分会根据内容自动调整。