页面跳转,A跳到B,B再返回A时自动定位到离开A时的位置
<template>
<div class="hello" @scroll="scrollLoad" id="myScrollBox">
<h1>{{ msg }}</h1>
<ul>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
</ul>
<button @click="goForward">go 2</button>
<ul>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
<li class="my-li">aaaaaaaaa</li>
</ul>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "this is hello 1 !",
lengthToTop: 0
};
}, beforeRouteLeave(to, from, next) {
this.recordViewPortPosition();
next();
}, mounted: function() {
this.setViewPortPosition();
}, methods: {
goForward: function() {
this.$router.push("h2");
}, // 获得距离顶部的位置,暂存一个变量里
// 本方法配合recordViewPortPosition、setViewPortPosition使用
scrollLoad: function() {
let box = document.getElementById("myScrollBox");
this.lengthToTop = box.scrollTop;
}, // 离开首页时记录距离顶部的位置,存到sessionStorage里,方便回来时取用
recordViewPortPosition: function() {
sessionStorage.lengthToTop = this.lengthToTop;
}, // 离开首页再返回时,重新定位到离开时的位置
setViewPortPosition: function() {
let lengthToTop = sessionStorage.lengthToTop;
if (lengthToTop === null || lengthToTop === undefined) {
lengthToTop = 0;
}
document.getElementById("myScrollBox").scrollTop = lengthToTop; // 距离顶部100px就直接写scrollTop = 100, 不要写100+“px”
}
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
position: absolute;
width: 100%;
height: 100%;
overflow: scroll;
}
li {
display: block;
height: 100px;
width: 300px;
border: 1px solid #000;
font-size: 15px;
}
</style>
页面跳转,A跳到B,B再返回A时自动定位到离开A时的位置的更多相关文章
- 解决TabActivity中子页面不通过导航跳转到还有一个页面的问题
问题:当你的导航在TabActivity中 而子页面的一个button须要切换到当中的某一个导航页面 转载请注明出处:http://blog.csdn.net/x605940745 demo下载地址: ...
- model,map,MapAndVivew用于页面跳转时候使用的即跳转后才添加属性 这样再回调中无法使用 因为回调的前提是页面不调转;解决的方法是用responsewrite(普通的字符响应)
model,map,MapAndVivew用于页面跳转时候使用的即跳转后才添加属性 这样再回调中无法使用 因为回调的前提是页面不调转:解决的方法是用responsewrite
- java ee 中 Jsp 页面的定时的跳转(数字倒数)
java ee 中 Jsp 页面的定时的跳转,实现数字倒计时跳转固定页面 1,Servlet类 RefreshServlet类实现 package org.servlet; import java. ...
- html(对php也有效)页面自动刷新和跳转(简单版本)
<html> <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...
- struts2拦截器实现session超时返回登录页面(iframe下跳转到其父页面)
需求:session超时时,返回登录页面,由于页面嵌套在iframe下,因此要跳转到登录页面的父页面,但是首页,登录页面等不需要进行跳转 实现: java文件:SessionIterceptor.ja ...
- Visual Studio中View页面与Js页面用快捷键互相跳转
现在已经将源码放到GitHub中了 地址是 https://github.com/liningit/ViewJsLN 公司开发的项目使用的是Mvc框架,且Js与View页面是分开在两个文件夹下的,所以 ...
- js页面3秒自动跳转
如何让当前页面3秒以后自动跳转到其他页面?JS页面自动跳转 想实现登陆后3秒自动跳转到某页的功能,在网上搜了一下,供以后使用 1.<script language= "javasc ...
- 使用了frame的页面如何整体进行跳转,而不是仅frame跳转
使用了frame的页面如何整体进行跳转,而不是仅frame跳转 js window.parent.location.href="你的地址"; php echo "&quo ...
- JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
JavaBean组件 JavaBean组件实际是一种java类.通过封装属性和方法成为具有某种功能或者处理某个业务的对象. 特点:1.实现代码的重复利用.2.容易编写和维护.3.jsp页面调用方便. ...
随机推荐
- tomcat入门(一)几种常见的使用tomcat部署项目的方式
1.常规方式部署 直接把web项目复制到tomcat安装目录下的%Tomcat_Home%/webapps/{web项目} 2.使用控制台进行部署 若一个web应用结构为D:\workspace\We ...
- 使用Myeclipse导入IDEA项目
问题描述:使用Myeclipse导入IDEA创建的Web项目,成功导入,但是显示的是一个普通的JAVA项目,无法加载到tomcat下. 解决方案:右键项目Properties,选择Myeclipse- ...
- [转]Jquery Mobile dialog的生命周期
本文转自:http://www.cnblogs.com/jackhuclan/archive/2012/04/05/2432972.html JQuery Mobile对htm5的移动开发绝对是个好用 ...
- git跟svn 服务端对比
Git已经火了很久,简单的使用也没有问题,但有几个问题一直以来都没有搞清楚:git跟svn有哪些异同,两者相互的优劣是什么,git的分布式怎么理解,为什么有离线提交,,,自己动手,分别看一下服务端跟客 ...
- JEECMS站群管理系统-- 标签的配置流程
以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding= ...
- 再次梳理css3动画部分知识
1.transform: 适用于2D或3D转换的元素 transform-origin:元素的位置点 css3转换(2D转换和3D转换):可以对元素进行移动.缩放.转动.拉长或拉伸. 2D转换:tra ...
- MVC 模型过滤
通用返回模型 /// <summary> /// WebApi返回数据的泛型类 /// </summary> /// <typeparam name="T&qu ...
- Hibernate系列4-----之删除
1.和它的增改查兄弟不同,多了个until包定义了HibernateUntil类,让我们来一起看看吧 public class HibernateUntil { private static Conf ...
- 【转】带你正确的使用List的retainAll方法求交集
一. retainAll 方法 public boolean retainAll(Collection<?> c) { //调用自己的私有方法 return batchRemove(c, ...
- Django Rest Framework框架源码流程
在详细说django-rest-framework源码流程之前,先要知道什么是RESTFUL.REST API . RESTFUL是所有Web应用都应该遵守的架构设计指导原则. REST是Repres ...