做二手网站有哪些问题,吉林商城网站建设,网页游戏传奇世界开服表,外贸论坛排行榜这里写目录标题 列表无限加载懒加载定制路由滚动使用scrollBehavior不起效不管用的原因使用scrollTo来实现路由滚动elMain elMain.scrollTo(...) 的作用是#xff1a; 无限加载和懒加载的区别 列表无限加载
无限加载功能在现代网页和移动应用中广泛应用#xff0… 这里写目录标题 列表无限加载懒加载定制路由滚动使用scrollBehavior不起效不管用的原因使用scrollTo来实现路由滚动elMain elMain.scrollTo(...) 的作用是 无限加载和懒加载的区别 列表无限加载
无限加载功能在现代网页和移动应用中广泛应用主要用于提升用户体验和优化性能。
核心实现逻辑使用elementPlus提供的v-infinite-scroll指令监听是否满足触底条件满足加载条件时让页面参数加一获取下一页数据做新老数据拼接渲染
页面加一获取下一页数据 新老数据拼接 利用es的特性进行新老数据拼接 […goodList.value,…res.result.items]
加载完毕停止监听 elementPlus有个:infinite-scroll-disabled“disabled”决定我们当前是否禁用加载 const disabled ref(false)
懒加载
场景电商网站的首页通常很长用户不一定能访问到页面靠下面的图片这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求。
指令用法:
img v-img-lazyitem.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 不存在则整个表达式的结果为 falsescrollTo 方法不会被调用。
这种方式是一种常见的短路求值技巧用于安全地调用可能未定义的对象的方法或属性。
无限加载和懒加载的区别
无限加载和懒加载是两种不同的内容加载技术它们虽然有相似之处但在使用场景和实现方式上有明显的区别。以下是它们的详细对比 定义 无限加载Infinite Scroll用户在浏览内容时随着滚动页面新的内容会自动加载到页面中而不需要用户点击“加载更多”按钮。常用于社交媒体、商品列表等场景用户可以不断向下滚动以查看新内容。 懒加载Lazy Loading只在需要时加载资源如图片、视频、组件等通常是当这些资源进入视口时才进行加载。主要用于优化性能减少初始加载时间和带宽消耗。 使用场景 无限加载适合在用户需要不断获取新内容的场景如社交媒体、新闻网站、产品列表等。用户的主要交互是滚动内容会自动加载提供流畅的体验。 懒加载适合在需要处理大量资源的页面如长文章中的图片、视频或大型应用中的组件。通过延迟加载非关键资源提高页面初始加载速度。 用户交互 无限加载通过滚动事件触发内容加载用户无需任何额外操作。可能导致用户不清楚何时会停止加载内容可能影响用户的时间管理。 懒加载通常是通过元素进入视口时触发加载用户看到内容时才会加载。用户可以在不影响其他内容加载的情况下浏览页面。 实现方式 无限加载监听滚动事件当用户接近页面底部时自动请求并加载更多数据。可能需要处理加载状态如加载指示器和滚动到特定位置的行为。 懒加载通过 Intersection Observer API 或其他方法检测元素是否进入视口才进行加载。通常用于图片、视频、长列表中的组件等。 性能优化 无限加载通过按需加载新的内容减少一次性加载的内容量从而优化性能。 懒加载减少初始加载时的资源数量提升页面加载速度和响应时间。
