vue使用keep-alive保持滚动条位置的实现方法


Posted in Javascript onApril 09, 2019

前言

下班前,20分钟,发一篇。。。

简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置。

事实上,就算不使用keep-alive,位置也没有被记录。

但是,在不适用keep-alive的时候,页面内容会刷新,所以就随他去了……就是这么任性……

思路

官方有推荐一个scrollBehavior,链接,但是上面标注,只在history.pushState的浏览器生效,不知道是不是只能开启history.pushState才可以使用,看了下实现,挺不友好的,还是自己搞一个吧。。。

实现思路是这样的,首先给路由增加一个对象meta:

meta: {
  keepAlive: true,
  scrollTop: 0,
}

keepAlive是否需要保持页面,scrollTop记录页面的滚动位置。

然后在app.vue增加如下入口:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

这样就启用keep-alive了。

然后在全局main.ts增加一个全局路由控制:

router.beforeEach((to: Route, from: Route, next: () => void) => {  
  if (from.meta.keepAlive) {
  const $content = document.querySelector('#content');
  const scrollTop = $content ? $content.scrollTop : 0;
  from.meta.scrollTop = scrollTop;
 }
 next();
});

很简单,离开的时候判断当前页是否需要保持页面,如果需要,记录页面主容器content的滚动位置,写入路由。

然后,每次进入保持好的页面,读取滚动条位置scrollTop,修改主容器的scrollTop,就搞定了:

public activated() {
  const scrollTop = this.$route.meta.scrollTop;
  const $content = document.querySelector('#content');
  if (scrollTop && $content) {
   $content.scrollTop = scrollTop;
  }
}

看起来很简单哦。

遗留问题

1、是不是每个页面都可以记录滚动条位置呢?

其实不是的,有的页面,内部有js交互,比如tab交互,不同的tab,页面可滚动的高度不一致,如果不保持页面状态而统一记录滚动位置,有可能导致滚动条的位置错位。

2、能不能把activated这一步写到全局的main.ts或者state去呢?

有想过这点,但是目前来说,没找到实现的方法。

首先,如果通过router来控制,做不到,全局路由控制只能在页面加载前监听,取不到载入页的元素。

如果写在一个通用的全局函数去控制,比如定义一个state,当页面加载完的时候设置,那需要定义一个mixins来处理,但是对这个mixins不太熟悉,暂时还不知道该怎么做,可能有时间找个方法搞定它。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript ajax 仿百度分页函数
Oct 29 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
浅谈JavaScript闭包
Apr 09 #Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 #Javascript
webpack4实现不同的导出类型
Apr 09 #Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 #Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 #Javascript
Koa 中的错误处理解析
Apr 09 #Javascript
简单说说如何使用vue-router插件的方法
Apr 08 #Javascript
You might like
php检测文件编码的方法示例
2014/04/25 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
python脚本监控docker容器
2016/04/27 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python 如何上传包到pypi
2020/12/24 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
NFL官方在线商店:NFLShop
2020/07/29 全球购物
非常详细的C#面试题集
2016/07/13 面试题
班主任对学生的评语
2014/04/26 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2014年部门工作总结
2014/11/12 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
Redis 异步机制
2022/05/15 Redis