Vue项目吸顶功能实现---@vueusecore的使用

Vue项目吸顶功能实现—@vueuse/core的使用

电商网站的首页内容会比较多，页面比较长，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见，所以需要一个吸顶导航的效果。

核心步骤：

目标: 完成头部组件吸顶效果的实现

交互要求

1. 滚动距离大于等于 78 的时候，组件会在顶部固定定位
2. 滚动距离小于 78 的时候，组件消失隐藏

实现思路

1. 准备一个吸顶组件，准备一个类名，控制显示隐藏
2. 监听页面滚动，判断滚动距离，距离大于 78 添加类名

静态结构

核心代码：

• 在 Layout/components/下，新建 app-header-sticky.vue 组件

<script setup lang="ts">
import { RouterLink } from "vue-router";
import AppHeaderNav from "./app-header-nav.vue";
</script>

<template>
  <div class="app-header-sticky" :class="{ show: true }">
    <div class="container">
      <RouterLink class="logo" to="/" />
      <AppHeaderNav />
      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 默认情况下完全把自己移动到上面
  transform: translateY(-100%);
  // 完全透明
  opacity: 0;
  // 显示出来的类名
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
  .container {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 200px;
    height: 80px;
    background: url("@/assets/images/logo.png") no-repeat right 2px;
    background-size: 160px auto;
  }
  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid @xtxColor;
    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;
      &:hover {
        color: @xtxColor;
      }
    }
  }
}
</style>

• Layout首页引入吸顶导航组件

<script setup lang="ts">
import AppTopnav from "./components/app-topnav.vue";
import AppHeader from "./components/app-header.vue";
import AppFooter from "./components/app-footer.vue";
+import AppHeaderSticky from "./components/app-header-sticky.vue";
import useStore from "@/store";
const { home } = useStore();
home.getAllCategory();
</script>

<template>
  <AppTopnav />
  <AppHeader />
+  <AppHeaderSticky />
+  <main class="app-body">
+    <!-- 路由出口 -->
+  </main>
  <AppFooter />
</template>

<style lang="less" scoped>
+.app-body {
+  min-height: 600px;
+}
</style>

吸顶实现

• 在滚动到 78px 完成显示效果（添加类名）

  通过滚动事件的触发，判断当前是否已经滚动了 78px，如果大于则添加类名，否则移除类名

  1. document.documentElement.scrollTop 获取滚动距离
  2. :class 动态控制类名显示

组件src/views/Layout/components/app-header-sticky.vue

<script setup lang="ts">
import { RouterLink } from "vue-router";
import AppHeaderNav from "./app-header-nav.vue";
+import { onMounted, onUnmounted, ref } from "vue";
+// 控制是否显示吸顶组件
+const isShow = ref(false);
+// 考虑优化，组件挂载时绑定事件，组件卸载时移除事件
+const handlerScroll = () => {
+  const y = document.documentElement.scrollTop;
+  if (y >= 78) {
+    isShow.value = true;
+  } else {
+    isShow.value = false;
+  }
+};
+onMounted(() => {
+  window.addEventListener("scroll", handlerScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handlerScroll);
+});
</script>

<template>
+  <div class="app-header-sticky" :class="{ show: isShow }">
    // ...
  </div>
</template>

吸顶功能-重构

目标： 使用 vueuse/core 重构吸顶功能

vueuse/core : 组合式 API 常用复用逻辑的集合

https://vueuse.org/core/useWindowScroll/

核心步骤

1）安装 @vueuse/core 包，它封装了常见的一些交互逻辑

yarn add @vueuse/core

2）在吸顶导航中使用

src/components/app-header-sticky.vue

<script setup lang="ts">
import AppHeaderNav from './app-header-nav.vue'
import { useWindowScroll } from '@vueuse/core'
// 控制是否显示吸顶组件
const { y } = useWindowScroll()
</script>

<template>
  <div class="app-header-sticky" :class="{ show: y >= 78 }">
     // ...
  </div>
</template>

常见疑问：

• vue2 项目中能使用 @vueuse/core 吗？
  • 可以使用，需配合 @vue/composition-api 让 Vue2 老项目支持 组合式API。