Vue電商網站首頁內容吸頂功能怎么實現

這篇文章主要介紹“Vue電商網站首頁內容吸頂功能怎么實現”，在日常操作中，相信很多人在Vue電商網站首頁內容吸頂功能怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue電商網站首頁內容吸頂功能怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

交互要求

• 滾動距離大于等于78個px的時候，組件會在頂部固定定位

• 滾動距離小于78個px的時候，組件消失隱藏

實現思路

• 準備一個吸頂組件，準備一個類名，控制顯示隱藏

• 監聽頁面滾動，判斷滾動距離，距離大于78px添加類名

核心代碼

（1）新建吸頂導航組件src/Layout/components/app-header-sticky.vue

<script lang="ts" setup name="AppHeaderSticky">
import AppHeaderNav from './app-header-nav.vue'
</script>
<template>
  <div class="app-header-sticky">
    <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;
  .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>

（2）Layout首頁引入吸頂導航組件

<script lang="ts" setup>
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'
</script>
<template>
  <AppTopnav></AppTopnav>
  <AppHeader></AppHeader>
+  <AppHeaderSticky></AppHeaderSticky>
  <div class="app-body">
    <!-- 路由出口 -->
    <RouterView></RouterView>
  </div>
  <AppFooter></AppFooter>
</template>
<style lang="less" scoped>
.app-body {
  min-height: 600px;
}
</style>

（3）提供樣式，控制sticky的顯示和隱藏

.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%);
+  &.show {
+    transition: all 0.3s linear;
+    transform: translateY(0%);
+  }

（4）給window注冊scroll事件，獲取滾動距離

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import AppHeaderNav from './app-header-nav.vue'
const y = ref(0)
const onScroll = () => {
  y.value = document.documentElement.scrollTop
}
onMounted(() => {
  window.addEventListener('scroll', onScroll)
})
onBeforeUnmount(() => {
  window.removeEventListener('scroll', onScroll)
})
</script>

（5）控制sticky的顯示和隱藏

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

（6）修復bug，為了吸頂頭部的內容不遮住不吸頂的頭部。

<div class="container" v-show="y >= 78">

也可以使用185px，正好原有的header全部消失時候展示吸頂的header

頭部分類導航-吸頂重構

vueuse/core : 組合式API常用復用邏輯的集合

目標： 使用 vueuse/core 重構吸頂功能

核心步驟

（1）安裝@vueuse/core 包，它封裝了常見的一些交互邏輯

yarn add @vueuse/core

（2）在吸頂導航中使用

src/components/app-header-sticky.vue

<script lang="ts" setup>
import AppHeaderNav from './app-header-nav.vue'
// import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
// const y = ref(0)
// const onScroll = () => {
//   y.value = document.documentElement.scrollTop
// }
// onMounted(() => {
//   window.addEventListener('scroll', onScroll)
// })
// onBeforeUnmount(() => {
//   window.removeEventListener('scroll', onScroll)
// })
// 控制是否顯示吸頂組件
const { y } = useWindowScroll()
</script>

到此，關于“Vue電商網站首頁內容吸頂功能怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！