vue中进入详情页记住滚动位置的方法(keep-alive)
2018-09-21 11:12
981 查看
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了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通过滚动行为实现从列表到详情,返回列表原位置的方法
- vue 使某个组件不被 keep-alive 缓存的方法
- vue项目优化之通过keep-alive数据缓存的方法
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- vue通过滚动行为实现从列表到详情,返回列表原位置
- vue keep-alive请求数据的方法示例
- vue解决使用webpack打包后keep-alive不生效的方法
- vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
- 基于vue中keep-alive缓存问题的解决方法
- 使用vue的时候我们使用keep-alive会将页面缓存的解决方法
- vue2.0路由切换后页面滚动位置不变BUG的解决方法
- vue-router如何在返回时返回到上次滚动位置 方法集锦
- 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
- 在C#中利用Keep-Alive处理Socket网络异常断开的方法
- vue2.0 keep-alive 缓存页面数据 3ff0
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
- 在C#中利用Keep-Alive处理Socket网络异常断开的方法
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- vue2.0 keep-alive最佳实践
- vue中遇到的坑keep-alive、vue-router相关