缓存滚动位置:解决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()
	},
}
相关推荐
ktkiko1114 小时前
用户模块——整合 Spring 缓存(Cacheable)
java·spring·缓存
西木Qi15 小时前
Redis数据迁移同步
数据库·redis·缓存
石去皿17 小时前
解决 LRU 缓存中的“堆使用后释放”问题
缓存
前端互助会17 小时前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
快来卷java18 小时前
深入剖析雪花算法:分布式ID生成的核心方案
java·数据库·redis·分布式·算法·缓存·dreamweaver
Chandler241 天前
Redis:哨兵机制
数据库·redis·缓存
Code额1 天前
缓存 “三剑客”
redis·缓存
Chandler242 天前
Redis:事务
数据库·redis·缓存
MasterNeverDown2 天前
Docker Desktop 安装 Redis:轻松搭建本地缓存服务
redis·缓存·docker