uni-app 自定义 tab 选项卡 2 - 潇洒哥gg height设置无效果

在处理 uni-app 自定义 tab 选项卡时，如果遇到 height 设置无效的情况，通常可能是因为 CSS 样式优先级问题、布局冲突或者特定的组件属性覆盖了你的设置。以下是一个基本的示例代码，展示如何自定义一个 tab 选项卡，并确保高度设置生效。

首先，确保你的页面结构大致如下：

<template>
  <view class="container">
    <view class="tabs">
      <view class="tab-item" @click="selectTab(1)">Tab 1</view>
      <view class="tab-item" @click="selectTab(2)">Tab 2</view>
    </view>
    <view class="tab-content">
      <view v-if="activeTab === 1" class="tab-pane">Content 1</view>
      <view v-if="activeTab === 2" class="tab-pane">Content 2</view>
    </view>
  </view>
</template>

接着，在 <style> 部分，设置样式，特别注意 height 的设置：

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 确保容器占满整个视口高度 */
}

.tabs {
  display: flex;
  height: 50px; /* 明确设置高度 */
  background-color: #f0f0f0;
  align-items: center;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.tab-content {
  flex: 1;
  overflow: hidden; /* 防止内容溢出 */
}

.tab-pane {
  height: 100%; /* 让每个 tab 内容占满剩余空间 */
  padding: 20px;
  background-color: #ffffff;
}
</style>

在 <script> 部分，管理 tab 的选中状态：

<script>
export default {
  data() {
    return {
      activeTab: 1
    };
  },
  methods: {
    selectTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

这个示例中，.tabs 类明确设置了 height: 50px;，这将确保 tab 栏的高度是你期望的值。同时，.tab-content 和 .tab-pane 使用 flex: 1; 和 height: 100%; 来确保内容区域正确填充剩余空间。

如果 height 设置仍然无效，请检查以下几点：

• 确保没有其他 CSS 规则（如全局样式或父元素的样式）覆盖了你的设置。
• 使用浏览器的开发者工具检查元素的实际计算样式，看看 height 属性是否被其他样式覆盖。
• 确保你的页面布局逻辑符合你的预期，特别是在使用 flexbox 或其他 CSS 布局模型时。