缓存滚动位置:解决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()
	},
}
相关推荐
阿湯哥6 分钟前
Redis数据库隔离业务缓存对查询性能的影响分析
数据库·redis·缓存
麦兜*6 分钟前
Redis 7.2 新特性实战:Client-Side Caching(客户端缓存)如何大幅降低延迟?
数据库·spring boot·redis·spring·spring cloud·缓存·tomcat
he___H1 小时前
尚庭公寓中Redis的使用
数据库·redis·缓存·尚庭公寓
不良人天码星12 小时前
redis-zset数据类型的常见指令(sorted set)
数据库·redis·缓存
Lisonseekpan16 小时前
Java Caffeine 高性能缓存库详解与使用案例
java·后端·spring·缓存
java水泥工17 小时前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
沐浴露z1 天前
分布式场景下防止【缓存击穿】的不同方案
redis·分布式·缓存·redission
Lisonseekpan1 天前
Spring Boot 中使用 Caffeine 缓存详解与案例
java·spring boot·后端·spring·缓存
kfepiza1 天前
Spring的三级缓存原理 笔记251008
笔记·spring·缓存
jun71181 天前
msi mesi moesi cpu缓存一致性
缓存