网站建设协议书 保密条款国内炫酷网站设计

列表无限加载

无限加载功能在现代网页和移动应用中广泛应用，主要用于提升用户体验和优化性能。

核心实现逻辑：使用elementPlus提供的v-infinite-scroll指令监听是否满足触底条件，满足加载条件时让页面参数加一获取下一页数据，做新老数据拼接渲染

页面加一，获取下一页数据

新老数据拼接

利用es的特性，进行新老数据拼接
[…goodList.value,…res.result.items]

加载完毕停止监听

elementPlus有个:infinite-scroll-disabled=“disabled”决定我们当前是否禁用加载
const disabled = ref(false)

懒加载

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

指令用法:

<img v-img-lazy="item.picture"/>

v-img-lazy
在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求。

核心原理：图片进入视口才会发送资源请求

自定义指令全局注册：




console.log(el,binding.value)打印的就是上述图片。

判断图片是否进入视口：
要使用useIntersectionObserver方法,先在@vueuse/core中引入。
然后useIntersectionObserver(el,([{isIntersecting}])=>{
console.log(isIntersecting); //会打印出true/false

	 if (isIntersecting) {// 进入视口区域el.src = binding.value;}

})
这样就可以让图片进入视口才加载能看得到的图片资源。

重复监听问题:
uselntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，存在内存浪费。调一下stop()就可以停止监听了。

逻辑书写位置：
懒加载指令的逻辑不应该直接写到入口文件中，我们要通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件即可
1、在src/directives/index.js中
install(app){
// 使用app实现懒加载指令逻辑
}
2、在main.js中
用app.use进行一个注册就可以了。

定制路由滚动

在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置。
如何配置：
vue-router支持scrollBehavior配置项，可以指定路由切换时的滚动位置。

scrollBehavior(){
return {top:0} //在页面顶部
}

使用scrollBehavior不起效不管用的原因

scrollBehavior 是让滚动条保持在最顶部，所以首先你需要让整个页面有一个滚动条，如果没有滚动条那就不能生效。所以就可能是你所在的那个页面的滚动条不是全局的整个大页面的滚动条，而是一个局部组件的滚动条。你可以在整个页面设置一个overflow:hidden让页面拥有滚动条试一试。

使用scrollTo来实现路由滚动

1、先获取那个局部组件

const elMain = document.querySelector(".el-main");

使用document.querySelector方法选择页面上第一个类名为el-main的元素，并将其存储在变量elMain中。
2、滚动到顶部

elMain && elMain.scrollTo({top: 0,behavior: "smooth",
});

首先检查elMain是否存在，如果存在，就调用elMain元素的scrollTo方法，将内容区域平滑地滚动到顶部。
3、允许导航继续
调用next()函数，允许当前的路由导航继续。这是必须的，因为如果不调用next()，导航将被阻止，页面不会跳转到目标路由。

总结：
在每次路由变化前，自动将.el-main元素（通常是页面的主要内容区域）平滑滚动到顶部，以确保用户每次进入新页面时都从内容的顶部开始阅读。这在提高用户体验方面很有用，特别是在长页面或单页应用（SPA）中。

elMain && elMain.scrollTo(…) 的作用是：

如果 elMain 存在（即不为 null 或 undefined），则执行 elMain.scrollTo({ top: 0, behavior: “smooth” })，使页面平滑滚动到顶部。

如果 elMain 不存在，则整个表达式的结果为 false，scrollTo 方法不会被调用。

这种方式是一种常见的短路求值技巧，用于安全地调用可能未定义的对象的方法或属性。

无限加载和懒加载的区别

无限加载和懒加载是两种不同的内容加载技术，它们虽然有相似之处，但在使用场景和实现方式上有明显的区别。以下是它们的详细对比：

1. 定义
   无限加载（Infinite Scroll）用户在浏览内容时，随着滚动页面，新的内容会自动加载到页面中，而不需要用户点击“加载更多”按钮。常用于社交媒体、商品列表等场景，用户可以不断向下滚动以查看新内容。

   懒加载（Lazy Loading）只在需要时加载资源（如图片、视频、组件等），通常是当这些资源进入视口时才进行加载。主要用于优化性能，减少初始加载时间和带宽消耗。

2. 使用场景
   无限加载适合在用户需要不断获取新内容的场景，如社交媒体、新闻网站、产品列表等。用户的主要交互是滚动，内容会自动加载，提供流畅的体验。

   懒加载适合在需要处理大量资源的页面，如长文章中的图片、视频，或大型应用中的组件。通过延迟加载非关键资源，提高页面初始加载速度。

3. 用户交互
   无限加载通过滚动事件触发内容加载，用户无需任何额外操作。可能导致用户不清楚何时会停止加载内容，可能影响用户的时间管理。

   懒加载通常是通过元素进入视口时触发加载，用户看到内容时才会加载。用户可以在不影响其他内容加载的情况下浏览页面。

4. 实现方式
   无限加载监听滚动事件，当用户接近页面底部时，自动请求并加载更多数据。可能需要处理加载状态（如加载指示器）和滚动到特定位置的行为。

   懒加载通过 Intersection Observer API 或其他方法检测元素是否进入视口，才进行加载。通常用于图片、视频、长列表中的组件等。

5. 性能优化
   无限加载通过按需加载新的内容，减少一次性加载的内容量，从而优化性能。

   懒加载减少初始加载时的资源数量，提升页面加载速度和响应时间。