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 对象的属性和方法4种不同的类型
Mar 19 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
sharp.js安装过程中遇到的问题总结
Apr 02 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中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python实现处理管道的方法
2015/06/04 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python的装饰器使用详解
2017/06/26 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python开发入门——列表生成式
2020/09/03 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
韩国11街:11STREET
2018/03/27 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
银行批评与自我批评
2014/02/10 职场文书
产品质量承诺范本
2014/03/31 职场文书
寒假社会实践个人总结
2015/03/06 职场文书