无限加载和懒加载及路由滚动及路由滚动不生效
这里写目录标题
- 列表无限加载
- 懒加载
- 定制路由滚动
- 使用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-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 方法不会被调用。
这种方式是一种常见的短路求值技巧,用于安全地调用可能未定义的对象的方法或属性。
无限加载和懒加载的区别
无限加载和懒加载是两种不同的内容加载技术,它们虽然有相似之处,但在使用场景和实现方式上有明显的区别。以下是它们的详细对比:
-
定义
无限加载(Infinite Scroll)用户在浏览内容时,随着滚动页面,新的内容会自动加载到页面中,而不需要用户点击“加载更多”按钮。常用于社交媒体、商品列表等场景,用户可以不断向下滚动以查看新内容。懒加载(Lazy Loading)只在需要时加载资源(如图片、视频、组件等),通常是当这些资源进入视口时才进行加载。主要用于优化性能,减少初始加载时间和带宽消耗。
-
使用场景
无限加载适合在用户需要不断获取新内容的场景,如社交媒体、新闻网站、产品列表等。用户的主要交互是滚动,内容会自动加载,提供流畅的体验。懒加载适合在需要处理大量资源的页面,如长文章中的图片、视频,或大型应用中的组件。通过延迟加载非关键资源,提高页面初始加载速度。
-
用户交互
无限加载通过滚动事件触发内容加载,用户无需任何额外操作。可能导致用户不清楚何时会停止加载内容,可能影响用户的时间管理。懒加载通常是通过元素进入视口时触发加载,用户看到内容时才会加载。用户可以在不影响其他内容加载的情况下浏览页面。
-
实现方式
无限加载监听滚动事件,当用户接近页面底部时,自动请求并加载更多数据。可能需要处理加载状态(如加载指示器)和滚动到特定位置的行为。懒加载通过 Intersection Observer API 或其他方法检测元素是否进入视口,才进行加载。通常用于图片、视频、长列表中的组件等。
-
性能优化
无限加载通过按需加载新的内容,减少一次性加载的内容量,从而优化性能。懒加载减少初始加载时的资源数量,提升页面加载速度和响应时间。
相关文章:

无限加载和懒加载及路由滚动及路由滚动不生效
这里写目录标题 列表无限加载懒加载定制路由滚动使用scrollBehavior不起效不管用的原因使用scrollTo来实现路由滚动elMain && elMain.scrollTo(...) 的作用是: 无限加载和懒加载的区别 列表无限加载 无限加载功能在现代网页和移动应用中广泛应用࿰…...

CSS底层基础:小白速来
1. CSS简介 CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观,包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素,并定义这些元素的具体样式属性。 基本结构示例: …...

【MySQL 进阶之路】索引概述
第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比一本教科书的目录部分,通过目录中找到对应文章的页码,便可快速定位到需要的文章。MySQL中也是一样的道理,进行数据查找时,首先查…...

【C++boost::asio网络编程】有关异步读写api的笔记
异步读写api 异步写操作async_write_someasync_send 异步读操作async_read_someasync_receive 定义一个Session类,主要是为了服务端专门为客户端服务创建的管理类 class Session { public:Session(std::shared_ptr<asio::ip::tcp::socket> socket);void Conn…...
Elasticsearch 的存储与查询
Elasticsearch 的存储与查询 在搜索系统领域,数据的存储与查询是两个最基础且至关重要的环节。Elasticsearch(ES) 在这两方面进行了深度优化,使其在关系型数据库或非关系型数据库中脱颖而出,成为搜索系统的首选。 映射 (Mapping) 映射 (Ma…...

008静态路由-特定主机路由
按照如上配置,用192.168.0.1 电脑ping 192.168.1.1 发现能够ping通 用192.168.0.1 电脑ping 192.168.2.1 发现不能ping通 这是因为192.168.0.1 和 192.168.1.1 使用的是同一个路由器R1。 192.168.0.1 和 192.168.2.1 通信需要先经过R1,再经过R2 …...

SystemUI 下拉框 Build 版本信息去掉
需求及场景 去掉SystemUI 下拉框 Build 版本信息 如下图所示:去掉 12 (SP1A.201812.016) 了解 去掉之前我们先了解它是个什么东西:其实就是一个Build RTM 信息显示 Android_12_build_SP1A.210812.016 修改文件 /frameworks/base/packages/Syste…...

【JS】栈内存、堆内存、事件机制区别、深拷贝、浅拷贝
js中,内存主要分为两种类型:栈内存(stack)、堆内存(heap),两种内存区域在存储和管理数据时有各自的特点和用途。 栈内存 访问顺序 栈是先进后出、后进先出的数据结构,栈内存是内存用…...

如何确保Java爬虫获得1688商品详情数据的准确性
在数字化商业时代,数据的价值日益凸显,尤其是对于电商平台而言。1688作为中国领先的B2B电子商务平台,提供了海量的商品数据接口,这些数据对于市场分析、库存管理、价格策略制定等商业活动至关重要。本文将详细介绍如何使用Java编写…...
【蓝牙通讯】iOS蓝牙开发基础介绍
1. iOS 蓝牙开发基础 在 iOS 中,蓝牙的操作主要是通过 Core Bluetooth 框架来实现。理解 Core Bluetooth 的基本组件和工作原理是学习 iOS 蓝牙开发的第一步。 核心知识点: Core Bluetooth 框架:这是 iOS 系统提供的专门用于蓝牙低功耗&am…...

Vue 90 ,Element 13 ,Vue + Element UI 中 el-switch 使用小细节解析,避免入坑(获取后端的数据类型自动转变)
目录 前言 在开发过程中,我们经常遇到一些看似简单的问题,但有时正是这些细节问题让我们头疼不已。今天,我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑,希望大家在使用时能够避免。 一. 问题背景 二. 问题分…...

echarts的双X轴,父级居中的相关配置
前言:折腾了一个星期,在最后一天中午,都快要放弃了,后来坚持下来,才有下面结果。 这个效果就相当是复合表头,第一行是子级,第二行是父级。 子级是奇数个时,父级label居中很简单&…...
RuoYi-Vue部署到Linux服务器(Jar+Nginx)
一、本地环境准备 源码下载、本地Jdk及Node.js环境安装,参考以下文章。 附:RuoYi-Vue下载与运行 二、服务器环境准备 1.安装Jdk 附:JDK8下载安装与配置环境变量(linux) 2.安装MySQL 附:MySQL8免安装版下载安装与配置(linux) 3.安装Redis 附:Redis下载安装与配置(…...
Linux firewalld常用命令
启动防火墙 systemctl start firewalld 停止防火墙 systemctl stop firewalld 防火墙开机自启动 systemctl enable firewalld 禁止防火墙开机自启动 systemctl disable firewalld 检查防火墙的状态 systemctl status firewalld 重新加载防火墙的配置 firewall-cmd -…...
Vue 组件之间的通信方式
Vue.js 中组件之间的通信是构建复杂应用的关键部分。以下是一些常见的Vue组件通信方式: 1. Props 和 Emit(父子组件通信) Props:父组件通过props向子组件传递数据。Emit:子组件通过emit触发事件,向父组件…...

el-select 修改样式
这样漂亮的页面,搭配的却是一个白色风格的下拉框 ,这也过于刺眼。。。 调整后样式为: 灯红酒绿总有人看着眼杂,但将风格统一终究是上上选择。下面来处理这个问题。 分为两部分。 第一部分:是修改触发框的样式 第二部…...

Java项目实战II基于微信小程序的亿家旺生鲜云订单零售系统的设计与实现(开发文档+数据库+源码)
目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着移动互联网技术的不断…...
算法训练营day27(回溯算法03:组合总和,组合总和2,分割回文串)
第七章 回溯算法part03● 39. 组合总和 ● 40.组合总和II ● 131.分割回文串详细布置 39. 组合总和 本题是 集合里元素可以用无数次,那么和组合问题的差别 其实仅在于 startIndex上的控制题目链接/文章讲解:https://programmercarl.com/0039.%E7%BB%84%E…...

【青牛科技】D8331 流量计电路芯片,兼容 CTs,电阻分流器和罗氏线圈传感器
概述: D8331 系列超低功耗混合信号处理器由多种设备组成,具有针对电能表应用的不 同外围设备。它们集成了模拟前端和固定功能 DSP 解决方案与一个增强型 8052 单片 机核心,RTC 和 LCD 驱动程序集成在一个单一部件中。测量内核包括有功、无功…...

R语言森林生态系统结构、功能与稳定性分析与可视化实践高级应用
在生态学研究中,森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性,还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...

React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...