小兔鲜项目要点总结

1.吸顶导航交互实现：

实现效果：当页面滚动大于78px时，吸顶导航显示，小于78px时吸顶导航隐藏

实现思路：

1、准备吸顶导航组件

2、获取滚动距离：

​ 使用vueUse插件中的useScorll获取页面滚动的距离，传入的参数为window

3、以滚动距离做判断条件控制盒子展示与隐藏

​ 首先设置元素显示和隐藏的样式：使用固定定位，left和top均设置为0，元素隐藏时设置transform将元素移出页面，并将透明度opacity设置为0，元素显示时设置transform为null，并将透明度设置为1，最后通过类名show的添加来实现元素的显示和隐藏。

​

2.Layout-Pinia优化重复请求

优化原因：由于吸顶导航和layout中的常规导航使用到的数据一致，同一数据会发出两次请求造成资源的浪费

解决办法：使用pinia统一管理列表数据，再分发给吸顶导航和常规导航使用

实现思路：

1、在pinia中书写获取列表数据的信息

2、分别在吸顶导航和常规导航中进行引入并使用

3.轮播图的实现

实现思路：

1.准备模板

2.熟悉elementPlus相关组件

3.获取接口数据

4.渲染组件

4.面板组件封装

场景说明：组件封装主要用于解决复用问题和业务维护问题，在商品展示中的新鲜好物和人气模块，在结构上非常相似，只是内容不同，通过组件封装可以实现复用结构的效果

核心思路：把可复用的结构只写一次，把可能发生变化的部分抽象成组件参数(props/插槽)

实现步骤：

1.不做任何抽象，准备静态模板

2.抽象可变部分

主标题和副标题是纯文本，可以抽象成prop传入

主体内容是复杂文本的模块，抽象成插槽传入

5.新鲜好物业务实现

1.准备模板

2.定制Props

3.定制插槽内容(接口+模板渲染)

6.图片懒加载指令实现

场景和指令用法：

场景：电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求

指令用法：在图片上绑定指令，该图片只有正式进入到视口区域时才会发送图片网络请求

实现步骤：

1.熟悉指令语法

2.判断图片是否进入视口(vueUse)

3.测试图片监控是否生效

4.如果图片进入视口，发送图片资源请求

5.测试图片资源是否发出

(把懒加载指令封装成插件，在main.js入口文件只需要负责注册插件)

解决重复监听问题：

useIntersectionOberserver对于元素的监听是一直存在的，除非手动停止监听，存在内存浪费

解决思路：在监听的图片第一次完成加载之后就停止监听(结构自带的stop方法)

7.GoodsItem组件封装

在项目中的很多业务模块中都需要用到同样的商品展示模块，没有必要重复定义，封装起来，方便复用

核心思路：把要显示的数据对象设计为props参数

8.一级分类路由配置

当点击普通导航和吸顶导航时，页面会跳转到对应的分类页，跳转的路由可以通过传参的方式确定

实现思路：

1.在全局路由中配置跳转路由，使用id占位

2.在使用到的地方进行参数的传递

9.面包屑导航

实现思路：

1.准备组件模板

2.封装接口函数，需要传入参数

3.调用接口获取数据，（使用路由参数）

4.渲染模板

10.一级分类中轮播图实现

实现步骤：

1.改造先前的接口（适配参数）

2.迁移首页轮播图逻辑

11.激活状态显示

12.解决路由缓存问题

什么是路由缓存：

响应路由参数发生变化

解决问题思路：

1.让组件实例不复用，强制销毁重建（太过简单粗暴，组件中所有请求都会重新发送，造成浪费）

2.监听路由变化，变化之后实行数据更新操作

13.配置二级路由

实现思路：

1.创建路由组件

2.配置路由关系

3.修改模板实现跳转