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中获取元素的几种方式小结
Jul 05 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue-cli3 热更新配置操作
Sep 18 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
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
php数据序列化测试实例详解
2017/08/12 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python开发编码规范
2006/09/08 Python
python 异常处理总结
2016/10/18 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
远程培训的心得体会
2014/09/01 职场文书
事业单位年度考核评语
2014/12/31 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
演讲比赛通讯稿
2015/07/18 职场文书