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简单实现banner图片切换
Jan 02 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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来处理多个提交任务
2006/10/09 PHP
学习php中的正则表达式
2014/08/17 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
报社实习生自荐信
2014/01/24 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
企业务虚会发言材料
2014/10/20 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
签证工作证明模板
2015/06/15 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书