js实现tabbar

实现 TabBar 的基本结构

使用 HTML 和 CSS 构建 TabBar 的基础结构。以下是一个简单的 HTML 示例：

<div class="tab-bar">
  <div class="tab active" data-tab="home">Home</div>
  <div class="tab" data-tab="profile">Profile</div>
  <div class="tab" data-tab="settings">Settings</div>
</div>
<div class="tab-content">
  <div class="content active" data-content="home">Home Content</div>
  <div class="content" data-content="profile">Profile Content</div>
  <div class="content" data-content="settings">Settings Content</div>
</div>

对应的 CSS 样式：

.tab-bar {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.tab {
  padding: 10px 20px;
  cursor: pointer;
}
.tab.active {
  background-color: #f0f0f0;
  border-bottom: 2px solid blue;
}
.tab-content .content {
  display: none;
  padding: 20px;
}
.tab-content .content.active {
  display: block;
}

添加 JavaScript 交互逻辑

通过 JavaScript 实现 TabBar 的切换功能：

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab');
  const contents = document.querySelectorAll('.content');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // 移除所有tab和content的active类
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // 添加active类到当前tab和对应的content
      tab.classList.add('active');
      const tabName = tab.getAttribute('data-tab');
      document.querySelector(`.content[data-content="${tabName}"]`).classList.add('active');
    });
  });
});

实现动态 TabBar

如果需要动态生成 TabBar，可以使用以下方法：

const tabData = [
  { id: 'home', label: 'Home' },
  { id: 'profile', label: 'Profile' },
  { id: 'settings', label: 'Settings' }
];

function renderTabBar() {
  const tabBar = document.createElement('div');
  tabBar.className = 'tab-bar';

  tabData.forEach(tab => {
    const tabElement = document.createElement('div');
    tabElement.className = 'tab';
    tabElement.textContent = tab.label;
    tabElement.setAttribute('data-tab', tab.id);
    tabBar.appendChild(tabElement);
  });

  document.body.appendChild(tabBar);
}

function renderTabContent() {
  const contentContainer = document.createElement('div');
  contentContainer.className = 'tab-content';

  tabData.forEach(tab => {
    const content = document.createElement('div');
    content.className = 'content';
    content.textContent = `${tab.label} Content`;
    content.setAttribute('data-content', tab.id);
    contentContainer.appendChild(content);
  });

  document.body.appendChild(contentContainer);
}

// 初始化
renderTabBar();
renderTabContent();

添加动画效果

为 TabBar 切换添加简单的过渡动画：

.content {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.content.active {
  opacity: 1;
}

响应式设计考虑

针对移动设备的响应式调整：

@media (max-width: 768px) {
  .tab-bar {
    flex-direction: column;
  }
  .tab {
    width: 100%;
  }
}

可复用组件实现

将 TabBar 封装为可复用的类：

class TabBar {
  constructor(containerId, tabs) {
    this.container = document.getElementById(containerId);
    this.tabs = tabs;
    this.render();
    this.bindEvents();
  }

  render() {
    this.container.innerHTML = `
      <div class="tab-bar">
        ${this.tabs.map(tab => `
          <div class="tab" data-tab="${tab.id}">${tab.label}</div>
        `).join('')}
      </div>
      <div class="tab-content">
        ${this.tabs.map(tab => `
          <div class="content" data-content="${tab.id}">${tab.content || ''}</div>
        `).join('')}
      </div>
    `;
  }

  bindEvents() {
    const tabs = this.container.querySelectorAll('.tab');
    tabs.forEach(tab => {
      tab.addEventListener('click', () => this.switchTab(tab));
    });
  }

  switchTab(selectedTab) {
    const tabId = selectedTab.getAttribute('data-tab');
    const tabs = this.container.querySelectorAll('.tab');
    const contents = this.container.querySelectorAll('.content');

    tabs.forEach(tab => tab.classList.remove('active'));
    contents.forEach(content => content.classList.remove('active'));

    selectedTab.classList.add('active');
    this.container.querySelector(`.content[data-content="${tabId}"]`).classList.add('active');
  }
}

// 使用示例
new TabBar('app', [
  { id: 'home', label: 'Home', content: 'Welcome to Home' },
  { id: 'profile', label: 'Profile', content: 'User Profile' }
]);