vue中进入详情页记住滚动位置的方法(keep-alive)
2019/6/27 7:41:16
本文主要是介绍vue中进入详情页记住滚动位置的方法(keep-alive),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive
1.首先在路由中引入需要的模块
{ path: ‘/scrollDemo', name: ‘scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue'], resolve) } }
2.在App.vue中设置缓存组件
<keep-alive> // 缓存组件跳转的页面 <router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view> </keep-alive> // 非缓存组件跳转页面 <router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
3.在页面注册对应的事件
1. 在return中定义一个初始值 scroll
2. 在mouted中 ,mouted中的方法代表dom已经加载完毕
window.addEventListener('scroll', this.handleScroll);
3.methods 用于存放页面函数
handleScroll () { this.scroll = document.documentElement && document.documentElement.scrollTop console.log(this.scroll) }
4. activated 为keep-alive加载时调用
activated() { if(this.scroll > 0){ window.scrollTo(0, this.scroll); this.scroll = 0; window.addEventListener('scroll', this.handleScroll); } }
5.deactivated 页面退出时关闭事件 防止其他页面出现问题
deactivated(){ window.removeEventListener('scroll', this.handleScroll); }
以上这篇vue中进入详情页记住滚动位置的方法(keep-alive)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于vue中进入详情页记住滚动位置的方法(keep-alive)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-19如何设置Vuex管理用户的登录和退出数据操作-icode9专业技术文章分享
- 2024-09-19如何给微信云函数下载package.json 中列出的所有依赖-icode9专业技术文章分享
- 2024-09-19Vue3全家桶资料:初学者入门教程与实战指南
- 2024-09-19Vue3资料:初学者快速入门指南
- 2024-09-19Vue资料:初学者必备的入门指南与实用资源
- 2024-09-19Vue3全家桶资料:初学者必备的入门教程与实践指南
- 2024-09-19Vue3 资料指南:快速入门与实战技巧
- 2024-09-19Vue资料指南:为初学者量身打造的前端框架入门教程
- 2024-09-19Vue3入门教程:快速启动与基本组件创建
- 2024-09-19Vue3学习:从零基础到实战的快速入门指南