【Vue3】电商网站吸顶功能

头部分类导航-吸顶功能

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

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

交互要求

滚动距离大于等于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>

【Vue3】电商网站吸顶功能相关推荐

2019年B2B电商网站开发重点功能全解析！
目前,不少制造企业都将B2B电商网站视为其数字化转型过程中必不可少的关键资产.我们在上篇文章中提及78%的B2B跨国企业均已开始涉猎在线销售,且绝大多数未进行数字化电商的企业,都计划在2019年投入到 ...
【技术种草】介绍一款开源电商网站的购物车添加功能的实现
目前电商领域有两款比较出名的开源电商网站解决方案,分别是基于 Angular 开发框架,代号为 Spartacus 的开源项目,以及基于 Vue 的 Vue Storefront. 作为 Sparta ...
关于电商网站购物车功能如何与登录账号相关联的一点想法
最近在试着做电商网站,自然也需要涉及到实现购物车的功能.然后就想到去用cookie来完成购物车的功能. 实现过程是新建一个cookie,把购物车实体类的list放进去,每次给购物车新增商品和删除商品的 ...
电商网站50W-100W高并发，秒杀功能是怎么实现的？
电商网站50W-100W高并发,秒杀功能是怎么实现的? 在淘宝.天猫.京东等国内大型电商平台"造节"的带领下,国内各电商平台纷纷跟进,双十一.双十二.618等电商专属节日也吸引了大 ...
网站搜索功能怎么实现_电商网站上的搜索功能是如何实现的？
今天是刘小爱自学Java的第159天. 感谢你的观看,谢谢你. 学习计划安排如下: 索引库本质上和数据库类似,也是存储数据的,既然如此自然也会有增删改查. 那么这个索引库到底有何特别应用呢? 索引库的 ...
axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作
Axure案例应用电商网站的搜索框,对商品.店铺和卖家进行搜索.切换下拉框中的内容时,切换到不同的搜索输入框,样式也相应改变,下面通过设置下拉列表框"选中项于"逻辑条件,实现上述 ...
大型网站架构系列：电商网站架构案例(2)
电网网站架构案例系列的第二篇文章.主要讲解网站架构分析,网站架构优化,业务拆分,应用集群架构,多级缓存,分布式Session. 五.网站架构分析根据以上预估,有几个问题: 需要部署大量的服务器,高峰 ...
Spark 案例（依据电商网站的真实需求）
目录数据说明需求1:Top10 热门品类需求说明实现方案一需求分析需求实现实现方案二需求分析需求实现实现方案三需求分析需求实现需求 2:Top10 热门品类中每个品类的 To ...
电商总结（八）如何打造一个小而精的电商网站架构
前面写过一些电商网站相关的文章,这几天有时间,就把之前写得网站架构相关的文章,总结整理一下.把以前的一些内容就连贯起来,这样也能系统的知道,一个最小的电商平台是怎么一步步搭建起来的.对以前的文章感兴趣 ...

【Vue3】电商网站吸顶功能

头部分类导航-吸顶功能

头部分类导航-吸顶重构

【Vue3】电商网站吸顶功能相关推荐

最新文章

热门文章