vue 组件来回切换时 记住上一个组件滚动位置(keep-alive)
记住组件滚动状态:
使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度。这个时候需要keep-alive配合。
方法一:如下情况导航在做普遍用法。前提是使用keep-alive
keep-alive提供了两个钩子函数:
1. acvitaved: keep-alive 组件激活时调用。
export default {
name: "docMng", //为了保存这个路由状态
data() {
return {
offsetTop: "" //获取滚动位置,下次进来的时候,设置滚动高度为这个值
};
},
activated() {
// keep-alive组件 页面进入的时候设置滚动高度
document.getElementById("mainContent").scrollTop = this.offsetTop;
},
deactivated() {
//keep-alive 组件停用时调用(简单理解为组件离开的时候)。
// 获取页面滚动高度,这个钩子有可能会拿不到数据,因为这个钩子执行的慢,可以用beforeRouteLeave代替
this.offsetTop = document.getElementById("mainContent").scrollTop;
},
// beforeRouteLeave(to, from, next) {
// // 组件离开的时候,获取页面滚动高度
// // this.offsetTop = document.getElementById('mainContent').scrollTop;
// next()
// },
};
方法二:项目全局页面滚动的情况,导航菜单在顶部的时候可以用此方法。(不必keep-alive也可以)
配合vue-router的scrollBehavior。直接在scrollBehavior里面设置滚动到某一位置是设置不上的,只能异步再加个定时。
savePosition输出的是{x:0,y:0}滚动的距离。
总结:
方法一 优点:由于keep-alive,所以到指定滚动高度的时候是无感知的。 缺点:需要对每个想要此功能的组件写相应代码。
方法二 优点:全局控制代码量少。 缺点:需要加定时才能,延时返回指定高度,显得突兀不流畅。
两种方法的采用完全看自己项目的设计排版,所以某一方法有时候是可以通用的。
vue 组件来回切换时 记住上一个组件滚动位置(keep-alive)的更多相关文章
- 关于含RecyclerView的fragment来回切换时页面自动滑动到底部的解决方法
原因: 在fragment中来回切换时RecyclerView获得了焦点,而RecyclerView的 focusableOnTouchMode属性默认是true,所以在切换时RecyclerView ...
- ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.
仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View. 实现原理,UINavigationController 的 self.view显示时把当前显示的vie ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...
- Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法
iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...
- vue axios请求频繁时取消上一次请求
一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求 ...
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
- jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
随机推荐
- Node.js:连接 MySQL
ylbtech-Node.js:连接 MySQL 1.返回顶部 1. Node.js 连接 MySQL 本章节我们将为大家介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作. 如果你 ...
- FMDB条件更新
更新操作返回一个BOOL值,YES表示操作成功,NO表示执行过程遇到错误,可以通过-lastErrorMessage和-lastErrorCode查看错误信息.使用executeUpdate:方法执行 ...
- redis的主从模式
主从通信过程 Master配置: 1:关闭rdb快照(备份工作交给slave) 2:可以开启aof slave配置: 1: 声明slave-of slaveof 192.168.0.102 2: 配置 ...
- layer最大话.最小化.还原回调方法使用
<head> <meta charset="UTF-8"> <title>layer最大话.最小化.还原回调方法使用</title> ...
- getElementsByClassName 方法兼容性封装方法二
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- [Reading] Asking while Reading
Asking while Reading ——读Java垃圾收集器与内存分配策略 Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”,墙外面的人想进去,墙里面的人却想出来. 为什么 ...
- 卡片式大学综合英语词汇(Windows Phone 8.1 RT app)
简易卡片式记单词app.词库是原滋原味的大学综合英语词汇,包含语音,使用卡片式设计.离线词库,随时随地记单词. 商店:http://www.windowsphone.com/zh-cn/store/a ...
- 3DSMAX制作逼真的欧式沙发建模教程
这篇教程是朋友们介绍利用3DSMAX制作逼真的欧式沙发建模,教程制作出来的效果真心很不错,通过这篇教程,大家可以学习沙发建模的制作方法和思路,推荐过来,一起来学习吧! 3DSMAX软件下载:http: ...
- 发个ZKW线段树板子测试一下代码高亮
是我,Long time no see --Jim 先安利 Wolves 歌手:Madilyn Bailey http://music.163.com/song/524149464 ...
- UVALive-8079 Making a Team 排列组合公式化简
题目链接:https://cn.vjudge.net/problem/UVALive-8079 题意 n个人组队,队伍人数小于等于n,每个队伍需要4个不同的职务的领导. 问这n个人可以组成多少队? n ...