缓存滚动位置:解决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()
	},
}
相关推荐
想要打 Acm 的小周同学呀3 小时前
LRU缓存算法
java·算法·缓存
hlsd#3 小时前
go 集成go-redis 缓存操作
redis·缓存·golang
镰刀出海3 小时前
Recyclerview缓存原理
java·开发语言·缓存·recyclerview·android面试
奶糖趣多多5 小时前
Redis知识点
数据库·redis·缓存
CoderIsArt6 小时前
Redis的三种模式:主从模式,哨兵与集群模式
数据库·redis·缓存
Yaml49 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
ketil2711 小时前
Redis - String 字符串
数据库·redis·缓存
清灵xmf12 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
生命几十年3万天13 小时前
redis时间优化
数据库·redis·缓存
java知路15 小时前
springboot 基于google 缓存,实现防重复提交
spring boot·后端·缓存