如何使用Ant Design Vue实现Tabs组件的滚动吸顶效果？-js教程-PHP中文网

如何使用Ant Design Vue实现Tabs组件的滚动吸顶效果？

碧海醫心

发布： 2025-02-22 10:14:09

原创

627人浏览过

如何使用ant design vue实现tabs组件的滚动吸顶效果？

实现Ant Design Vue Tabs组件滚动吸顶效果

本文介绍如何利用Ant Design Vue的Tabs组件实现滚动吸顶效果。核心思路是监听页面滚动事件，根据滚动位置动态调整Tabs组件的定位属性。

步骤如下：

获取滚动距离和Tabs位置： 通过e.target.scrollTop获取滚动条垂直滚动距离，document.getElementsByClassName('tabs')[0]?.offsetTop获取Tabs组件距离页面顶部的距离。

立即学习“前端免费学习笔记（深入）”；
监听滚动事件： 使用@scroll事件监听页面滚动，实时更新Tabs组件的样式。

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情
动态控制定位： 当滚动距离超过Tabs距离页面顶部的距离时，将Tabs组件的position属性设置为fixed，使其固定在顶部；否则，重置为static。

代码示例：

<code class="vue"><template>
  <div ref="scrollPositionContainer">
    <div class="parent">
      <product-info></product-info>
      <a-tabs :class="isFixed ? 'isfixed' : ''"></a-tabs>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const scrollPositionContainer = ref(null);
    const scrollTop = ref(0);
    const barOffsetTop = ref(0);
    const isFixed = ref(false);

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

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

    return {
      scrollPositionContainer,
      isFixed,
      handleScroll,
    };
  },
};
</script>

<style scoped>
.parent {
  position: relative;
  overflow: auto; /* 确保滚动条可见 */
}
.isfixed {
  position: fixed;
  top: 0;
  width: 100%; /* 确保宽度铺满 */
  z-index: 10; /* 设置合适的z-index*/
}
</style></code>

登录后复制

关键点：