uni-app tab切换带折叠效果

你可以使用uni-app的动画效果和组件来实现带折叠效果的tab切换。以下是一个简单的示例代码，演示了如何实现这个效果：

<template>
  <view class="container">
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab1' }"
        @click="toggleTab('tab1')"
      >
        Tab 1
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab2' }"
        @click="toggleTab('tab2')"
      >
        Tab 2
      </view>
    </view>
    <view class="content">
      <view
        class="content-item"
        :class="{ collapsed: activeTab !== 'tab1' }"
      >
        Content 1
      </view>
      <view
        class="content-item"
        :class="{ collapsed: activeTab !== 'tab2' }"
      >
        Content 2
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
    };
  },
  methods: {
    toggleTab(tab) {
      if (this.activeTab === tab) {
        this.activeTab = ''; // 折叠当前展开的tab
      } else {
        this.activeTab = tab; // 切换到选中的tab
      }
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.tab-bar {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background-color: #f0f0f0;
}

.tab-item {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.tab-item.active {
  background-color: #e0e0e0;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-item {
  padding: 16px;
  transition: height 0.3s ease-in-out;
}

.content-item.collapsed {
  height: 0;
  overflow: hidden;
}
</style>

在上面的示例中，我们使用了两个tab，通过点击不同的tab来切换展示的内容。activeTab变量用于控制当前选中的tab，通过给选中的tab添加active类名来进行样式的变化。content-item使用了过渡效果，通过改变高度来实现折叠和展开的效果。

你可以根据自己的需要进行样式和布局的调整，以达到你想要的效果。希望对你有所帮助！如果有任何问题，请随时提问。