vue scroller返回页面记住滚动位置的实例代码


Posted in Javascript onJanuary 29, 2018

1,设置keepAlive:是否缓存

router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}

2,设置渲染页面

app.vue

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

3,记录滚动位置并赋值

beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}

总结

以上所述是小编给大家介绍的vue scroller返回页面记住滚动位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
浅析vue深复制
Jan 29 #Javascript
浅析从vue源码看观察者模式
Jan 29 #Javascript
实例学习JavaScript读取和写入cookie
Jan 29 #Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 #Javascript
JS中Object对象的原型概念基础
Jan 29 #Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
javascript trie前缀树的示例
Jan 29 #Javascript
You might like
PHP导出带样式的Excel示例代码
2016/08/28 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP attributes()函数讲解
2019/02/03 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript json 新手入门文档
2009/12/03 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
自我鉴定书范文
2013/10/02 职场文书
出纳岗位职责
2013/11/09 职场文书
中国好声音华少广告词
2014/03/17 职场文书
公诉意见书范文
2015/06/05 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS