多Tab自动吸顶下的多滚动容器设计详细指南

2023-11-12 20:38:47

多Tab自动吸顶下的多滚动容器概述

多Tab自动吸顶下的多滚动容器是一种交互设计模式，它允许用户在多个选项卡（Tab）之间切换，每个选项卡都有自己的滚动容器。当用户滚动其中一个滚动容器时，其他滚动容器将保持固定不动。这种交互方式在移动应用程序中非常流行，因为它可以提供流畅、无缝的用户体验。

2. 多Tab自动吸顶下的多滚动容器实现步骤

2.1 HTML 结构

<div class="container">
  <div class="tab-bar">
    <button class="tab" data-tab="tab-1">Tab 1</button>
    <button class="tab" data-tab="tab-2">Tab 2</button>
    <button class="tab" data-tab="tab-3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel" id="tab-1">
      <!-- Tab 1 content -->
    </div>
    <div class="tab-panel" id="tab-2">
      <!-- Tab 2 content -->
    </div>
    <div class="tab-panel" id="tab-3">
      <!-- Tab 3 content -->
    </div>
  </div>
</div>

2.2 CSS 样式

.container {
  position: relative;
}

.tab-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  border-bottom: none;
  cursor: pointer;
}

.tab:hover {
  background-color: #f2f2f2;
}

.tab.active {
  background-color: #ffffff;
  border-bottom: 1px solid #000000;
}

.tab-content {
  position: relative;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

2.3 JavaScript 代码

const tabs = document.querySelectorAll('.tab');
const tabPanels = document.querySelectorAll('.tab-panel');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Hide all tab panels
    tabPanels.forEach((tabPanel) => {
      tabPanel.classList.remove('active');
    });

    // Hide all tabs
    tabs.forEach((tab) => {
      tab.classList.remove('active');
    });

    // Show the active tab panel
    tabPanels[index].classList.add('active');

    // Show the active tab
    tab.classList.add('active');
  });
});