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实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
浅谈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
Yii学习总结之安装配置
2015/02/22 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
浅谈Python的文件类型
2016/05/30 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python实现超市扫码仪计费
2018/05/30 Python
Windows下python3.7安装教程
2018/07/31 Python
Python实现全排列的打印
2018/08/18 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
业务部主管岗位职责
2014/01/29 职场文书
教师演讲稿大全
2014/05/16 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers