如何实现自适应宽度的TabBar组件：可均分空间或横向滚动

核心思路 #

通过CSS Flex布局实现标签均分，结合JS动态判断标签总宽度与容器宽度的关系，切换组件的布局模式：

• 当标签总宽度 ≤ 屏幕宽度：每个标签均分可用空间
• 当标签总宽度 > 屏幕宽度：标签保留自身尺寸，容器支持横向滚动

代码实现 #

HTML结构 #

<div class="tab-bar">
  <div class="tab-items">
    <button class="tab-item active">首页</button>
    <button class="tab-item">分类</button>
    <button class="tab-item">我的收藏夹</button>
    <button class="tab-item">购物车</button>
    <button class="tab-item">个人中心</button>
  </div>
</div>

CSS样式 #

/* 外层容器：占满屏幕宽度，开启横向滚动 */
.tab-bar {
  width: 100vw;
  overflow-x: auto;
  /* 可选：隐藏滚动条优化视觉 */
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar {
  display: none;
}

/* 标签容器：默认Flex布局 */
.tab-items {
  display: flex;
  gap: 0; /* 可根据需求调整标签间距 */
}

/* 标签项：默认均分宽度 */
.tab-item {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap; /* 禁止文本换行，保证宽度计算准确 */
  font-size: 14px;
}

/* 激活态样式 */
.tab-item.active {
  background-color: #2196f3;
  color: #fff;
}

/* 滚动模式：取消均分，标签使用自身宽度 */
.tab-items.scrollable .tab-item {
  flex: none;
}

JS逻辑（动态切换模式） #

const tabItems = document.querySelector('.tab-items');
const tabBar = document.querySelector('.tab-bar');

// 判断并切换TabBar模式
function toggleTabMode() {
  const isOverflow = tabItems.scrollWidth > tabBar.clientWidth;
  tabItems.classList.toggle('scrollable', isOverflow);
}

// 初始化检查
toggleTabMode();

// 窗口大小变化时重新检查
window.addEventListener('resize', toggleTabMode);

关键细节说明 #

• white-space: nowrap：确保标签文本不换行，避免标签宽度被压缩，保证总宽度计算准确
• scrollWidth vs clientWidth：scrollWidth是标签容器的总内容宽度（包含溢出部分），clientWidth是容器的可视宽度，通过两者比较判断是否需要滚动
• 框架适配：如果在Vue/React等框架中使用，可将逻辑迁移到组件的生命周期钩子（如Vue的mounted、React的useEffect），并监听窗口 resize 事件

内容的提问来源于stack exchange，提问作者DJ. XYZ