vuejs 生命周期 updated

最新推荐文章于 2025-02-20 09:00:00 发布

转载最新推荐文章于 2025-02-20 09:00:00 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiao20/p/8718258.html

文章标签：

#javascript #ViewUI

本文介绍了一种在Vue.js中实现项目列表滚动位置记忆的方法。解决了用户在浏览长列表时，点击查看详情后再返回仍停留在上次滚动位置的问题。通过利用Vue的生命周期函数updated来记录并恢复滚动位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间公司领导提示出了一个需求就是像微信朋友圈一样，刷列表一直刷到底部或者是半中央，然后点击返回或者是离开一下页面，再辞进入朋友圈页面依然现实的还是之前滚动的位置。

我现在做的公司贷后系统，项目列表里面也有很多项目，一直划啊划，点进去看详情然后再回来就没有定位在原来那个项目那里，体验度不太好。也花了我一上午时间，各种找资料，其实一上午也没搞定。其实思路是有的。就是记录一下滚动的位置。回到项目列表的页面在滚到相对应的位置就行。但是就是一直不行。之前一直写在vuejs生命周期的activated 里面根本不起作用，这个坑踩了很久很久。简直是各种调试各种找资料。 activated这个东西要结合keep-alive使用，其实是运用组件缓存。

代码如下：App.vue