vue下拉加载页面切换回到当前滚动位置

embedded/2024/12/25 14:45:52/

当项目是下拉分页加载数据时,当离开页面再次回到当前页面时,数据会从第一页重新加载,这就会造成不好的体验。所以解决办法就是在离开当前页面时记录当前滚动的位置,然后再下次回到当前页面时,跳转到当前记录的位置。触底下拉加载可看下面这篇帖子:

el-scrollbar实现触底加载数据_el-scrollbar触底事件-CSDN博客

用el-scrollbar组件时,需要记录滚动的位置,需要用到scroll事件,然后通过scrollTop,因为

通过ref属性是拿不到滚动位置,所以需要通过scroll事件来记录每次滚动的位置。

<el-scrollbarv-if="state.list.length"ref="scroll"class="scrollBox"@scroll="handleScroll">
</el-scrollbar>// 记录当前滚动的位置
const handleScroll = (event: any) => {state.scrollPosition = event.scrollTop;
}

然后再离开页面时将当前滚动位置存到缓存中,但是如果有多个页面都需要记录的话,就需要区分存储的名字来进行区分,这里用到的是拼接当前路由的name属性,不会存在重复的问题。

值得注意的是:在vue页面中,一般离开页面时在事件onBeforeUnmount进行处理,但因为要拼接路由的name,在onBeforeUnmount生命周期中,拿到的name属性是跳转到新页面的name属性,而不是当前页面的,所以需要用到onBeforeRouteLeave,可以拿到当前页面的name属性来进行下一步操作。比如:

onBeforeRouteLeave(() => {if (scroll.value) {const name = route.name as string;sessionStorage.setItem(`scrollPosition-${name}`, state.scrollPosition + "");}
});

然后再进入页面时获取当前页面存储的滚动位置。然后进行跳转。这就需要用到scrollTo属性。

if (scroll.value) {const name = route.name as string;const scrollPosition =sessionStorage.getItem(`scrollPosition-${name}`) || "0";scroll.value.scrollTo({ top: scrollPosition });
}

但是会有一个衍生问题,如果加载了多页数据,也记录了当前滚动的位置,但当重新回到当前页面的时候,它只能跳到最底部,然后加载下一页的数据,并不能达到回到离开页面时记录的位置。所以这就需要下一步的操作,将数据和当前页数存储到store中,进入页面时,先从store中拉取数据和当前应该开始的页数,如果没有则拉取数据,否则就用store中存储的数据,就可以解决这一问题。

但当页面刷新时,store中的数据就会清空,但是当前页面存储的滚动位置还是在缓存中存在的,所以还会进行距离滚动。理想状态应该是页面刷新时,回到最顶部,这里解决方案就有很多,记录一下我的解决方法,用到的是监听浏览器刷新,然后刷新时,清空掉自己存储的滚动位置。

// 获取所有的缓存,然后遍历自己存储时的特殊开头,然后清空掉所有存储的滚动位置
const removeItemsWithPrefix = (prefix: any) => {// 遍历 sessionStorage 中所有的键for (let i = 0; i < sessionStorage.length; i++) {const key = sessionStorage.key(i) as any; // 获取当前的键if (key.startsWith(prefix)) {// 判断该键是否以指定的前缀开头sessionStorage.removeItem(key); // 移除该项}}
};
// "scrollPosition-"  这就是存储时所用的特殊标识
const handleBeforeUnload = () => {removeItemsWithPrefix("scrollPosition-");
};

下面是监听页面刷新和卸载监听的事件。

onBeforeUnmount(() => {window.removeEventListener("beforeunload", handleBeforeUnload);
});
onMounted(async () => {window.addEventListener("beforeunload", handleBeforeUnload);
}


http://www.ppmy.cn/embedded/148647.html

相关文章

git分支强推 push

1.单分支强推 git push origin 分支名 --force 2.多分支强制提交&#xff08;谨慎操作&#xff0c;会影响其他分支&#xff09; git push --force --tags origin refs/heads/* 这个命令的含义是强制推送所有本地分支到远程仓库&#xff0c;并且同时推送所有标签…

WEB 漏洞 - 文件包含漏洞深度解析

目录 WEB 漏洞 - 文件包含漏洞深度解析 一、引言 二、什么是文件包含漏洞 三、文件包含漏洞原理 四、文件包含漏洞检测步骤及方法 五、文件包含漏洞类型 六、文件包含漏洞利用方式及示例 七、漏洞防御方案及代码示例 一、引言 在 Web 安全领域&#xff0c;文件包含漏洞…

UDP网络编程套接

目录 本文核心 预备知识 1.端口号 认识TCP协议 认识UDP协议 网络字节序 socket编程接口 sockaddr结构 UDP套接字编程 服务端 客户端 TCP与UDP传输的区别 可靠性&#xff1a; 传输方式&#xff1a; 用途&#xff1a; 头部开销&#xff1a; 速度&#xff1a; li…

大数据-255 离线数仓 - Atlas 数据仓库元数据管理 数据血缘关系 元数据

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

数字逻辑(五)——用二进制来表示音频和视频

目录 1. 用二级制来表示音频 1.1 采样 1.2 量化 1.3 编码 2. 用二进制来表示视频 2.1 使用二进制来存储文件 2.2 使用二进制来采集视频 2.3 计算机如何播放视频 1. 用二级制来表示音频 声音是由物体的振动来表示的&#xff0c;振动是一种连续的波形&#xff0c;因此…

[计算机图形学] 【Unity Shader】【图形渲染】Shader数学基础6-逆矩阵与正交矩阵

在计算机图形学与Shader编程中,矩阵广泛应用于各种变换操作,如旋转、缩放、平移等。理解矩阵的基本性质,尤其是逆矩阵和正交矩阵,对于有效地实现图形变换至关重要。本文将介绍逆矩阵和正交矩阵的数学基础,帮助你更好地理解这些概念及其在图形学中的应用。 逆矩阵的基本概…

android studio更改应用图片,和应用名字。

更改应用图标&#xff0c;和名字 先打开AndroidManifest.xml文件。 更改图片文件名字&#xff08; 右键-->构建-->重命名&#xff08;R&#xff09;&#xff09;

【magic-dash】01:magic-dash创建单页面应用及二次开发

文章目录 一、magic-dash是什么1.1 安装1.2 使用1.2.1 查看内置项目模板1.2.2 生成指定项目模板1.2.3 查看当前magic-dash版本1.2.4 查看命令说明1.2.5 内置模板列表二、创建虚拟环境并安装magic-dash三、magic-dash单页工具应用开发3.1 创建单页面项目3.1.1 使用命令行创建单页…