当前位置：首页 > VUE

vue 实现tab滚动切换

2026-02-24 23:33:31VUE

实现 Tab 滚动切换的基本思路

在 Vue 中实现 Tab 滚动切换，可以通过监听滚动事件或手动触发滚动行为来完成。以下是两种常见的实现方式。

监听滚动事件自动切换 Tab

通过监听滚动位置，动态计算当前可视区域对应的 Tab 并高亮显示。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: activeTab === index }"
        @click="scrollToTab(index)"
      >
        {{ tab.title }}
      </button>
    </div>

    <div class="tab-content" ref="tabContainer">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-panel" 
        :ref="`tabPanel-${index}`"
      >
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' },
        { title: 'Tab 3', content: 'Content 3' },
      ],
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const tabPanels = this.$refs.tabContainer.children;
      let activeIndex = 0;

      for (let i = 0; i < tabPanels.length; i++) {
        const rect = tabPanels[i].getBoundingClientRect();
        if (rect.top <= window.innerHeight / 2) {
          activeIndex = i;
        }
      }

      this.activeTab = activeIndex;
    },
    scrollToTab(index) {
      const panel = this.$refs[`tabPanel-${index}`][0];
      panel.scrollIntoView({ behavior: 'smooth' });
    },
  },
};
</script>

<style>
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.tab-panel {
  height: 500px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用 IntersectionObserver 实现更精确的检测

IntersectionObserver API 可以更高效地检测元素是否进入可视区域。

methods: {
  initObserver() {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = this.tabs.findIndex(
              (tab) => tab.id === entry.target.id
            );
            this.activeTab = index;
          }
        });
      },
      { threshold: 0.5 }
    );

    this.$refs.tabContainer.children.forEach((panel) => {
      observer.observe(panel);
    });
  },
},
mounted() {
  this.initObserver();
},

横向滚动的 Tab 实现

如果需要横向滚动的 Tab 栏，可以使用 CSS 的 overflow-x: auto 和 JavaScript 控制滚动位置。

<template>
  <div>
    <div class="horizontal-tabs" ref="tabsContainer">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: activeTab === index }"
        @click="scrollToTab(index)"
      >
        {{ tab.title }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToTab(index) {
      const tabs = this.$refs.tabsContainer.children;
      tabs[index].scrollIntoView({
        behavior: 'smooth',
        inline: 'center',
      });
    },
  },
};
</script>

<style>
.horizontal-tabs {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 0;
}
.horizontal-tabs button {
  flex-shrink: 0;
}
</style>