利用Ant Design Vue Tabs组件打造Vue.js滚动吸顶效果

本文介绍如何在Vue.js项目中，使用Ant Design Vue的Tabs组件实现滚动吸顶效果。 核心思路是结合position: sticky或position: fixed属性，动态调整Tabs组件的位置。

要实现吸顶，需要获取Tabs组件距离页面顶部的距离，并与当前滚动条位置进行比较。当滚动条位置超过Tabs组件顶部距离时，则将Tabs组件固定在顶部。

具体步骤如下：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

立即学习“前端免费学习笔记（深入）”；

1. 监听滚动事件： 使用@scroll事件监听页面滚动，并将滚动距离存储在响应式变量中。
2. 获取Tabs组件距离顶部的距离： 组件加载完成后，使用nextTick获取Tabs组件的offsetTop值。
3. 动态设置定位： 根据滚动距离和Tabs组件距离顶部的距离比较，动态设置Tabs组件的position属性为sticky或fixed。

以下代码示例演示了如何实现：

<template>
  <div class="scroll-container">
    <div class="parent">
      <product-info></product-info>
      <a-tabs :class="{'is-fixed': isFixed}" :tabbargutter="30" class="tabs" v-model:activeKey="activeKey">
        <a-tab-pane key="performance" tab="性能">...</a-tab-pane>
        <a-tab-pane key="style" tab="样式">...</a-tab-pane>
        <a-tab-pane key="analys" tab="分析">...</a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { ref, nextTick, onActivated } from 'vue';

export default {
  setup() {
    const scrollTop = ref(0);
    const barOffsetTop = ref(0);
    const isFixed = ref(false);
    const activeKey = ref('performance'); // 初始化选中tab

    const handleScroll = (e) => {
      scrollTop.value = e.target.scrollTop;
      isFixed.value = scrollTop.value >= barOffsetTop.value;
    };

    onActivated(() => {
      nextTick(() => {
        barOffsetTop.value = document.getElementsByClassName('tabs')[0]?.offsetTop || 0;
      });
    });

    return {
      scrollTop,
      barOffsetTop,
      isFixed,
      handleScroll,
      activeKey
    };
  },
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  overflow-y: auto;
}

.parent {
  position: relative;
}

.is-fixed {
  position: sticky;
  top: 0;
}

.tabs {
  background-color: #fff;
}
</style>

通过以上方法，当页面滚动到Tabs组件位置时，Tabs组件将吸附到顶部，提供更好的用户体验。 向上滚动时，Tabs组件会恢复到其原始位置。 请确保<product-info></product-info>组件存在且有足够高度触发滚动。