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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 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
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Laravel find in set排序实例
2019/10/09 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
Div自动滚动到末尾的代码
2008/10/26 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python3 xpath和requests应用详解
2020/03/06 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
小学生班会演讲稿
2014/01/09 职场文书
房地产还款计划书
2014/01/10 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
白酒市场营销方案
2014/02/25 职场文书
百日安全生产活动总结
2014/07/05 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
告知书格式
2015/07/01 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书