js实现tabbar

实现TabBar的基本结构

使用HTML和CSS构建TabBar的基础结构。TabBar通常由一组水平排列的按钮或标签组成，每个标签对应不同的内容区域。

<div class="tabbar">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <button class="tab-button" data-tab="tab3">Tab 3</button>
</div>

<div class="tab-content active" id="tab1">Content for Tab 1</div>
<div class="tab-content" id="tab2">Content for Tab 2</div>
<div class="tab-content" id="tab3">Content for Tab 3</div>

.tabbar {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.tab-button.active {
  border-bottom: 2px solid blue;
}

.tab-content {
  display: none;
  padding: 20px;
}

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

添加JavaScript交互逻辑

通过JavaScript实现TabBar的切换功能。监听按钮点击事件，切换对应的内容区域。

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮和内容的active类
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });

    // 为当前按钮和对应内容添加active类
    button.classList.add('active');
    const tabId = button.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

动态生成TabBar

如果需要动态生成TabBar，可以通过JavaScript创建DOM元素并插入页面。

const tabs = [
  { id: 'tab1', label: 'Tab 1', content: 'Content for Tab 1' },
  { id: 'tab2', label: 'Tab 2', content: 'Content for Tab 2' },
  { id: 'tab3', label: 'Tab 3', content: 'Content for Tab 3' }
];

const tabbar = document.createElement('div');
tabbar.className = 'tabbar';

const tabContentContainer = document.createElement('div');

tabs.forEach((tab, index) => {
  const button = document.createElement('button');
  button.className = 'tab-button';
  if (index === 0) button.classList.add('active');
  button.setAttribute('data-tab', tab.id);
  button.textContent = tab.label;
  tabbar.appendChild(button);

  const content = document.createElement('div');
  content.className = 'tab-content';
  content.id = tab.id;
  content.textContent = tab.content;
  if (index === 0) content.classList.add('active');
  tabContentContainer.appendChild(content);
});

document.body.appendChild(tabbar);
document.body.appendChild(tabContentContainer);

// 添加事件监听
document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });
    button.classList.add('active');
    const tabId = button.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

使用事件委托优化性能

对于动态生成的TabBar或大量标签的情况，可以使用事件委托减少事件监听器的数量。

document.querySelector('.tabbar').addEventListener('click', (event) => {
  if (event.target.classList.contains('tab-button')) {
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });

    event.target.classList.add('active');
    const tabId = event.target.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  }
});

添加动画效果

为Tab切换添加平滑的动画效果，提升用户体验。

.tab-content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  height: auto;
}

响应式设计

确保TabBar在不同屏幕尺寸下都能良好显示。

@media (max-width: 600px) {
  .tabbar {
    flex-direction: column;
  }

  .tab-button {
    width: 100%;
    text-align: left;
  }

  .tab-button.active {
    border-bottom: none;
    border-left: 2px solid blue;
  }
}

保存当前选中状态

使用localStorage保存用户最后选中的Tab，提升用户体验。

// 保存状态
document.querySelector('.tabbar').addEventListener('click', (event) => {
  if (event.target.classList.contains('tab-button')) {
    const tabId = event.target.getAttribute('data-tab');
    localStorage.setItem('lastActiveTab', tabId);
    // 其他切换逻辑...
  }
});

// 恢复状态
window.addEventListener('DOMContentLoaded', () => {
  const lastActiveTab = localStorage.getItem('lastActiveTab');
  if (lastActiveTab) {
    const button = document.querySelector(`.tab-button[data-tab="${lastActiveTab}"]`);
    if (button) {
      button.click();
    }
  }
});