【小兔鲜电商前台 | 项目笔记】第二天

前言：小兔鲜电商前台项目是一个基于Vue的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目，希望本系列文章可以帮助到你。

【小兔鲜电商前台 | 项目笔记】第二天

今日完结：

Layout静态结构搭建
字体图标引入
吸顶导航交互实现
Pinia优化重复请求
Home-banner轮播图实现

今日收获：

1.字体图标的引入

字体图标引入有多个方法，其中一种就是Font class引入。

在项目中引入 iconfont 生成的 Font class 链接后，通过给标签添加 iconfont 基础类和对应图标类即可使用字体图标。

1.拷贝项目下面生成的fontclass代码

javascript 复制代码

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

2.挑选相应图标并获取类名，应用于页面

javascript 复制代码

<i class="iconfont icon-xxx"></i>

2.学会吸顶导航交互

实现思路：给导航设置固定定位(position:fixed)，默认用transform:translateY(-100%)和opacity:0 隐藏；定义show类，取消位移并设置不透明，搭配过渡实现平滑显示；监听滚动距离，大于阈值时动态添加show类，控制导航显示。其中监听滚动距离用VueUse的useScroll方法，可快速获取指定容器（如 window）的滚动距离，返回响应式数据，直接用于判断触发吸顶效果。

javascript 复制代码

<script setup>
import {useScroll} from '@vueuse/core'
const {y} = useScroll(window)

</script>

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


<style scoped lang='scss'>
.app-header-sticky {
 ...
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

 ...
</style>

杂项知识点：

VueUse

VueUse 是一套专为 Vue 设计的常用逻辑工具库，把滚动、防抖、节流、懒加载、窗口大小、本地存储等高频场景封装成现成的组合式函数，不用自己写原生 JS 实现，直接调用即可。

总结：

今天主要是把基本的框架搭好了，也学到了如何引入字体图标，了解到了常用的逻辑工具库-VueUse。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！