小tips:页面滚动到关闭时的位置与不滚动
标题显而易见,要说两种情况:重新打开页面或者返回某个页面时滚动到上次离开时的位置,以及不滚动保持在顶部。
滚动
这也有两种情况:页面重新打开,与返回某个页面。
如果是前者,必定用cookie
或者localStorage
。或者麻烦一点的、在webview中用其他手段。总之这个必须有存储。
然后在组件的activited
或是window.onload
时取出存储内容改变scrollTop
。非常牛逼。
对于原生页面,如果在关键位置没有图片和表格,可以尝试在
onreadystatechange
中完成,不必等到onload
。
关于这点,背景和降级处理等具体可以参考笔者的这篇文章:点击跳转
若是第二种情况,则只需要临时缓存即可,这里拿vue演示一下:
有两个方案。其一,利用路由中的meta
,在离开页面时缓存 top 信息
// router/index.js
{path: "/user",name: "user",component: () => import("../views/user.vue"),meta: { scrollTop: 0, keepScroll: true }
},
// ...
router.beforeEach((to, from, next) => {// 记录需要缓存页面的滚动条高度if (from.meta.keepScroll) {const $content = document.querySelector("#app");const scrollTop = $content ? $content.scrollTop : 0;from.meta.scrollTop = scrollTop;}next();
});
然后在回到当前页面时拿到临时缓存,并赋值
// utils/index.js
export const getScroll = vm => {const scrollTop = vm.$route.meta.scrollTop;const $content = document.querySelector('#app');if (scrollTop && $content) {$content.scrollTop = scrollTop;}
};
组件内
import * as util from '@/utils/';
//...
activeted() {// 保持滚动条util.getScroll(this);}
其二,利用keep-alive
缓存整个页面。但是仅限于没有实时数据变动的页面
<template><div id="app"><keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template>
路由配置里 在需要被缓存的页面meta里配置keepAlive属性
{path: '/index',name: 'index',meta: {title: ' ',keepAlive: true,//此组件需要被缓存},component: () => import('@/components/index'),
},
组件内在beforeRouteLeave
钩子函数中,将该页面的 keepAlive 属性设为false
beforeRouteLeave (to, from, next) { from.meta.keepAlive = false;next();
},
然后需要在下一个页面进行配置,页面返回时设置上一个页面的 keepAlive 为true
beforeRouteLeave (to, from, next) {if (to.path == "/index") {to.meta.keepAlive = true;} else {to.meta.keepAlive = false;}next();
},
不滚动
其实有的页面我们会发现,体验下来觉得并不想让重新进入时回到上一次浏览的地方。
理论上说这里不加上面提到的各种方法不就行了?其实不然。
「重新进入」也分两种情况:重新打开这个页面,和刷新页面。
前者大可不必关心。对于后者,在比如QQ内置浏览器中,短时间内重新打开相同页面的逻辑和普通刷新是一样的。
在浏览器中,普通刷新会“记住”用户上次的位置似乎是个惯例了。如何在页面刷新时保持在顶部呢?
浏览器提供了history
API实现。其兼容性还算不错,除了IE外基本目前使用的浏览器都可以使用了。
if (history.scrollRestoration) {history.scrollRestoration = 'manual';
}
强制刷新(CTRL + F5)不会“记住”用户位置
小tips:页面滚动到关闭时的位置与不滚动相关推荐
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件 window.onblur = function(e) { //you code }; 弹 ...
- html自动关闭当前页面,html如何关闭当前页面
html关闭当前页面的方法:1.自定义提示关闭:2.在即将离开当前页面时,用户点浏览器的最大化最小化关闭按钮中的关闭按钮onbeforeunload事件. 本教程操作环境:windows7系统.htm ...
- onbeforeunload不触发_用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在 Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时 ...
- java 返回上一个页面_页面返回上一页浏览位置
1.如果上一页是静态页面,可以用 history.go(-1)方法: go() 方法可加载历史列表中的某个具体的页面. 该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表 ...
- 微信小程序页面上下滚动、左右滑动(二)
系列文章目录 微信小程序页面上下滚动.左右滑动(一) 文章目录 系列文章目录 前言 项目结构 解决问题1 1.pretest页面 2.test页面 解决问题2 总结 参考 前言 在上一篇文章,讲解了再 ...
- 微信小程序提交审核时提示:“ 小程序页面内容涉及账户充值服务,需补充商家自营-预付卡销售-发行方类目。请在基础信息处申请该类目”的解决方法
微信小程序在多次提交审核时,出现这个提示: 1: 小程序页面内容涉及账户充值服务,需补充商家自营-预付卡销售-发行方类目.请在基础信息处申请该类目,通过资质审核并在配置功能页添加符合该类目的功能页面. ...
- 微信小程序页面跳转后定时器如何关闭
微信小程序页面跳转后定时器如何关闭 1.在页面中定义,定时器形参,并在跳转到其它页面后,在隐藏和未加载中删除定时器 Page({data: {timer:'',//定义定时器形参,为空字符在这里插入代 ...
- IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法 当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况 第一步 第二步 当微信小程序页面 ...
- 【微信小程序】小程序显示弹窗时禁止下层的内容滚动|遮罩层滚动穿透
小程序显示弹窗时禁止下层的内容滚动|遮罩层滚动穿透 第一种方式 页面上加catchtouchmove="consume" JS // 把这个事件给消耗掉,这是是必须写的, 不写是可 ...
- 【干货#011】小程序页面滚动实现广告条隐藏
缘起 小程序需要在手机狭小的屏幕中放入尽量多的内容,而老板想在在页面放个广告条,由于挤占了不然就不大的页面控件,对程序的功能操作又有较大的影响.如何兼顾两者的需求? 下面介绍一种默认显示页面首部广告条 ...
最新文章
- vps建网站python_VPS配置python web环境真吐血
- SAP SD基础知识之税(Taxes)
- DispatcherServlet的启动和初始化
- python概述_Python-概述
- Ocelot中文文档-微服务ServiceFabric
- php处理post表单数据,php – Httpful post表单数据
- MATLAB 生成exe 的几种方法
- 基于核极限学习机(KELM)分类 -附代码
- 编译原理实验-PL0自底向上语法分析
- java下载服务器资源
- 鸟哥的linux私房菜 第五章
- win7系统如何开启打印服务器配置,win7系统怎么添加打印服务器端口
- Excel公式中的LookUp三剑客(可以取代Vlookup的神秘公式)
- 东财《领导科学X》综合作业
- 程序集引用里面的“Culture=neutral”是什么意思?
- 微信公众号教程—记录个人公众号运营(待更新)
- 计算机操作系统 电子科技大学 期末考试
- python pdf提取数据_python从PDF中提取数据的示例
- 输出菱形图案Python
- 开发H5游戏练手, 黑暗堡垒-炼狱传奇H5 (一) 登陆界面开发