缓存滚动位置:解决keep-alive组件缓存滚动位置失败问题

怎样在vue中缓存组件?大家都知道,使用keep-alive组件即可,但是使用keep-alive缓存页面后,发现虽然页面缓存成功了,但是列表的滚动条又自动回到了最上方。

是的,keep-alive组件是不会缓存滚动位置的

怎样缓存滚动位置呢?这是我们这一章讲的问题。

核心思想是在路由钩子函数中将滚动位置记录和复写。

在对应位置加入如下代码即可:

其中scrollBar是要获取到滚动内容的父元素,也就是含有滚动条的元素

javascript 复制代码
export default {
	data() {
		scroll: 0, //记录浏览位置
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
			scrollBar.scrollTop = vm.scroll
		})
	},
	beforeRouteLeave(to, from, next) {
		const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
		this.scroll = scrollBar.scrollTop;
		next()
	},
}
相关推荐
喜欢敲代码的程序员3 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
数据狐(DataFox)4 小时前
SQL参数化查询:防注入与计划缓存的双重优势
数据库·sql·缓存
大只鹅5 小时前
Springboot3整合ehcache3缓存--XML配置和编程式配置
spring boot·缓存
海的诗篇_5 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
持之以恒的天秤6 小时前
Redis—哨兵模式
redis·缓存
西岭千秋雪_8 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
sunbyte10 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
大只鹅10 小时前
两级缓存 Caffeine + Redis 架构:原理、实现与实践
redis·缓存·架构
zzywxc78712 小时前
如何高效清理C盘、释放存储空间,让电脑不再卡顿。
经验分享·缓存·性能优化·电脑
UQI-LIUWJ14 小时前
计算机组成笔记:缓存替换算法
笔记·缓存