vue中进入详情页记住滚动位置的方法(keep-alive)


Posted in Javascript onSeptember 21, 2018

> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 #Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 #Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 #Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 #Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
含有CKEditor的表单如何提交
2014/01/09 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python中常用信号signal类型实例
2018/01/25 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
自荐信封面
2013/12/04 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
预备党员公开承诺书
2014/05/28 职场文书
社区戒毒工作方案
2014/06/04 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers