用组合式API实现吸顶功能的技巧

2024-01-06 03:47:36

引言

吸顶导航是一种在用户滚动页面时始终固定在页面顶部的导航栏。这对于需要快速访问重要链接的网站来说非常有用，例如电子商务网站或博客。

在 Vue 3 中，我们可以使用组合式 API 来轻松实现吸顶功能。组合式 API 是 Vue 3 中的新特性，它允许我们在组件中使用函数来组合和重用逻辑。这使得我们可以创建更灵活和可重用的组件。

使用组合式API实现吸顶功能

要使用组合式 API 实现吸顶功能，我们可以使用 @vueuse/core 库。@vueuse/core 库提供了一个 useSticky() 函数，该函数可以让我们轻松地将吸顶功能添加到我们的组件中。

首先，我们需要在我们的组件中安装 @vueuse/core 库。我们可以使用以下命令来安装：

npm install @vueuse/core

安装完成后，我们就可以在我们的组件中使用 useSticky() 函数了。以下是如何使用 useSticky() 函数来实现吸顶功能：

import { useSticky } from '@vueuse/core'

export default {
  setup() {
    const isSticky = useSticky()

    return {
      isSticky
    }
  },
  template: `
    <div v-if="isSticky">
      <!-- 吸顶导航栏的内容 -->
    </div>
  `
}

在上面的代码中，我们首先使用 useSticky() 函数来创建一个 isSticky 响应式变量。然后，我们在模板中使用 v-if 指令来判断 isSticky 是否为 true。如果 isSticky 为 true，则表示导航栏已经固定在页面顶部，我们可以显示吸顶导航栏的内容。

在吸顶导航中使用src/components/header-sticky.vue

除了使用第三方库来实现吸顶功能之外，我们也可以通过使用 src/components/header-sticky.vue 组件来实现吸顶功能。src/components/header-sticky.vue 是一个 Vue 组件，它可以轻松地将吸顶功能添加到我们的组件中。

以下是如何使用 src/components/header-sticky.vue 组件来实现吸顶功能：

<template>
  <div class="header-sticky">
    <!-- 吸顶导航栏的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSticky: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      if (window.pageYOffset > 100) {
        this.isSticky = true
      } else {
        this.isSticky = false
      }
    }
  }
}
</script>

<style>
.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>

在上面的代码中，我们首先定义了一个名为 isSticky 的数据属性。然后，我们在 mounted() 钩子函数中添加了一个滚动监听器。当用户滚动页面时，滚动监听器会调用 handleScroll() 方法。在 handleScroll() 方法中，我们判断用户是否已经滚动到了页面顶部以上 100 像素。如果用户已经滚动到了页面顶部以上 100 像素，则我们将 isSticky 的值设置为 true，表示导航栏已经固定在页面顶部。否则，我们将 isSticky 的值设置为 false，表示导航栏还没有固定在页面顶部。

使用JavaScript实现吸顶功能

除了使用组合式 API 和第三方组件来实现吸顶功能之外，我们也可以通过使用 JavaScript 来实现吸顶功能。以下是如何使用 JavaScript 来实现吸顶功能：

const header = document.querySelector('.header')

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 100) {
    header.classList.add('sticky')
  } else {
    header.classList.remove('sticky')
  }
})

在上面的代码中，我们首先获取了 header 元素的引用。然后，我们在 window 对象上添加了一个滚动监听器。当用户滚动页面时，滚动监听器会调用一个匿名函数。在匿名函数中，我们判断用户是否已经滚动到了页面顶部以上 100 像素。如果用户已经滚动到了页面顶部以上 100 像素，则我们将 sticky 类添加到 header 元素上，表示导航栏已经固定在页面顶部。否则，我们将 sticky 类从 header 元素上移除，表示导航栏还没有固定在页面顶部。