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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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
基于empty函数的判断详解
2013/06/17 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python中的变量如何开辟内存
2018/06/26 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
妇科医生自荐信
2013/11/05 职场文书
模具毕业生推荐信
2014/02/15 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
财产保全担保书范文
2014/04/01 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年工程师工作总结
2014/11/25 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android
Golang 遍历二叉树
2022/04/19 Golang