关于keep-alive缓存滚动条位置问题

原创 已于 2023-03-02 10:54:41 修改 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #react #html #前端

于 2020-10-23 10:31:43 首次发布
该博客介绍了如何在Vue应用中利用router的scrollBehavior功能，实现页面跳转时的滚动条位置保存与恢复。当从A页面跳转到B页面时，A页面会记录当前滚动位置，在B页面加载时根据预设逻辑设置滚动条位置，例如将滚动条定位到y轴坐标600处，允许自定义调整该位置。

在这里插入图片描述
直接利用router里面的scrollBehavior去进行，假设你在a页面点击去b页面的话，那a页面在点击的那一刻在这里插入图片描述
可以先获取滚动条的位置并且存入，在router里面去判断你要指定滚动条位置以及项目判断逻辑了，y:600替换成自已修改的

Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前）
🏆 前端领域优质创作者
08-25 4223
Vue-页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），实现从详情返回列表,保持原先的滚动位置，vue使用keep-alive还原滚动位置的问题，nuxt.js项目页面缓存（keep-alive-props）回到指定滚动位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），vue项目中keep-alive的使用,从详情页返回列表时保存浏览位， vue实现返回记住滚动位置，
缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题
技术圈
07-19 3629
但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。怎样缓存滚动位置？这篇文章教会你。
vue中keep-alive缓存滚动条
weixin_44696379的博客
07-03 5293
前言 这几天公司在做一个app，需要嵌套H5页面，于是H5页面的编写就落到了本人的手里，啥都不说just do it 别逼逼！ 项目过程中因为做的页面是列表页和详情页，为了接近原生和用户体验好，所以在列表和详情路由切换时候就要缓存列表页数据（路由跳转就是 列表➡详情返回到➡列表），使用户体验更好 怎么实现 keep-alive 第一步，在路由元信息里配置需要缓存的页面，我用的keepAlive表示...
修复使用keep-alive缓存使用better-scroll滚动条的页面，导致的页面无法滚动滑动的问题
weixin_43185419的博客
01-14 1252
问题复现：一开始在vue移动端项目中使用的better-scroll滚动条的插件，后面做项目性能优化时，需要对该页面进行缓存。调试过程中发现页面无法滑动，真机测试中则是偶尔能滑动，偶尔不行。 问题分析：在使用better-scroll插件中，需要给滚动条设置当前高度，而使用keep-alive缓存页面后，则缺失了刷新滚动条的操作。 解决办法：我们可以使用activated生命周期钩子来进行滚动条刷新的操作。 关于activated生命周期钩子，在vue.js文档的这个位置：activated生命周期钩子
keep-alive实现缓存组件，并且实现缓存滚动条位置
bushiaaa的博客
09-20 581
需求：在列表页浏览后进入详情页，返回后列表页进行缓存，目的是为了用户可以继续回到上次浏览的页码和滚动条位置。可以在用户点击进入某个订单的详情页时将滚动条位置缓存到data中。但是缓存滚动条位置要如何实现呢？实现方案：keep-alive。这样就可以实现缓存列表组件了。
keep-alive记录滚动条位置
陈景夏
04-22 1052
在做消息列表时需要记录keep-alive切换页面的滚动条位置。 mounted() { // 监听滚动条的位置 this.$refs.scrollDom.addEventListener( 'scroll', (res) => { const height = res.target this.tableScrollTop = height.scrollTop
vue使用keep-alive保持滚动条位置的实现方法
10-17
然而，当我们使用Vue内置的<keep-alive>组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个问题，我们需要通过一些编程技巧来手动实现滚动条位置的保存与恢复。 首先，要实现滚动条位置的保持...
Vue中keep-alive 实现后退不刷新并保持滚动位置
10-15
在描述中提到，`<keep-alive>`在处理带有滚动条的组件时，不会自动记录滚动位置。这意味着，当你在页面间来回切换，即使组件被缓存，滚动条的位置也不会保持。为了解决这个问题，我们需要利用Vue的生命周期钩子函数`...
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
12-30
使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...
keep-alive的使用，keep-alive保存滚动条位置。
qq_54753561的博客
12-28 4273
1、keep-alive是Vue提供给我们一个内置组件，会缓存不活动的组件实例，而不是销毁它们， 作为标签使用 包裹在需要缓存的组件外 2、在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
Vue.js中keep-alive缓存（页面+滚动条）
xsgg1234的博客
08-04 2095
Vue.js中keep-alive缓存（页面+滚动条） 1、要缓存的标签中加入 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 2、router文件中meta加入keepAlive {
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 8600
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
vue中keep-alive从详情页返回列表页缓存，保持原滚动条位置
m0_58190742的博客
01-08 738
需要从商品列表页diamond中点击某一个商品进入商品详情页productDetail后，从详情页返回到列表页时需保持原来的滚动位置，并使用keep-alive进行组件缓存实现性能优化
keep-alive 实现后退不刷新并保持滚动位置
高先生的猫
07-14 2309
vue可以通过<keep-alive>元素包裹组件，实现缓存，下次使用时不需要重新创建该组件。但存在一个问题：keep-alive包裹的组件中有滚动元素时，keep-alive不会储存滚动位置。实现后退不刷新主要依据keep-alive组件的activated和deactivated这两个生命周期钩子函数。 vue钩子函数的执行顺序:不使用keep-alive beforeRouteEnter --> created --> mounted --> destroyed .
vue中进入详情页记住滚动位置的方法(keep-alive)
weixin_56254725的博客
11-13 1045
以上就是通过Vue的keep-alive组件实现进入详情页记住滚动位置的方法。步骤三：记录和恢复滚动位置 在目标详情组件中，需要注册滚动事件并记录滚动位置，在页面激活时恢复滚动位置。步骤二：在App.vue中使用keep-alive标签 接着，在应用的根组件App.vue中，利用keep-alive标签包裹router-view，以便对需要缓存的路由视图进行缓存。在实现滚动位置记忆功能时，主要的思路是利用keep-alive的特性，在页面切换时记录下当前滚动位置，并在页面重新激活时恢复滚动位置。
使用keep-alive时，el-table的滚动条设置问题
m0_49343686的博客
01-13 1901
在项目中使用了keep-alive来缓存组件，且使用elementUI中的table列表， 现在需求是在列表点进详情后再返回出来，el-table的滚动条和点进详情时保持一致。 默认情况下返回滚动条会自动置顶， 但直接对scrollTop赋值没有效果，使用$nextTick也是没有效果。 但是使用setTimeout可以赋值成功。 代码如下： <template> <div class="table"> <el-table ref="table">
vue项目vant的滚动失效、keepAlive缓存位置不正确原因
总结前端开发中遇到的问题，分享前端知识
12-09 1598
花费了半天终于找到了原因： 统一样式设置问题：注释overflow-y:auto; 或者body中，仔细查看。
利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置
ydongabc
11-04 2072
<keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive> 组件后即可使用 activa...
vue使用keep-alive保持滚动条位置 (vux组件库中的Scroller及普通元素)
guairena的博客
08-13 1095
就看见
keep-alive 缓存滚动条
最新发布
08-14
在使用 Vue 的 `keep-alive` 缓存页面状态时，恢复滚动条位置是一个常见的优化需求，尤其是在移动端列表页与详情页之间切换的场景中。当用户从列表页滚动到某个位置后进入详情页，再返回时，期望仍然停留在原来的位置。 ### 滚动位置恢复的实现方式 1. **利用 `keep-alive` 的缓存机制** `keep-alive` 会缓存组件的状态，包括 DOM 的位置和滚动条的位置。因此，在 App.vue 中通过以下方式配置路由视图，确保需要缓存的页面被 `keep-alive` 包裹： ```html <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" /> ``` 在对应的路由配置中，将 `meta.keepAlive` 设置为 `true`，表示该页面需要缓存： ```javascript { path: '/list', name: 'ListPage', component: () => import('@/views/ListPage.vue'), meta: { keepAlive: true } } ``` 这样可以确保页面状态（包括滚动位置）在返回时保持不变[^1]。 2. **手动保存和恢复滚动位置** 在某些复杂场景下，例如页面被 `exclude` 排除缓存，或者需要更精细地控制滚动行为，可以结合 Vue Router 的 `scrollBehavior` 配置实现滚动位置的恢复： ```javascript const router = new VueRouter({ routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } else { return { x: 0, y: 0 }; } } }); ``` 该方法适用于未使用 `keep-alive` 缓存的页面，能够通过浏览器的历史记录恢复滚动位置[^2]。 3. **结合 `activated` 和 `deactivated` 生命周期钩子** 对于需要动态控制缓存行为的页面，可以利用 `activated` 和 `deactivated` 生命周期钩子来手动记录和恢复滚动条位置： ```javascript data() { return { scrollTop: 0 }; }, activated() { // 恢复滚动位置 this.$refs.listContainer.scrollTop = this.scrollTop; }, deactivated() { // 保存当前滚动位置 this.scrollTop = this.$refs.listContainer.scrollTop; } ``` 在页面组件中通过这种方式，可以实现更精确的滚动位置控制[^3]。 4. **避免因缓存导致的副作用** 使用 `keep-alive` 缓存页面时，需要注意组件的生命周期钩子不会重新执行，这可能导致某些操作（如数据更新、DOM 重绘）失效。可以通过 `include` 和 `exclude` 属性控制哪些组件需要缓存，避免不必要的副作用： ```html <keep-alive> <component :is="currentComponent" v-if="$route.meta.keepAlive" /> </keep-alive> ``` 同时，确保在页面返回时通过 `beforeRouteLeave` 设置 `isRefresh` 标志，控制是否需要刷新页面内容[^4]。 ### 总结 结合 `keep-alive` 和 Vue Router 的 `scrollBehavior`，可以有效实现页面状态和滚动位置的恢复。对于需要精细控制的场景，通过 `activated` 和 `deactivated` 生命周期钩子手动管理滚动位置是一种可靠的方式。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值