vue-scroller记录滚动位置的示例代码
时间:2019-04-12
本文章向大家介绍vue-scroller记录滚动位置的示例代码,主要包括vue-scroller记录滚动位置的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述:
列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的。
代码部分:
beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this setTimeout(function () { vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false); },0)//同步转异步操作 } }) } }, beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top; next() },
需要注意的点:
1.熟悉vue-router和vue-scroller的api
2.beforeRouteEnter的时候,是无法通过this去访问vue实例的,需要借助于vm
3.setTimeout 0 的使用
等下周发版的时候,我贴上链接,可以体验下效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【深度学习系列】卷积神经网络详解(二)——自己手写一个卷积神经网络
- 区块链钱包mMoney向GooglePay、Applepay发起挑战
- Model验证系统运行机制是如何实现的?
- CentOS 6.8 部署zookeeper集群
- ASP.NET MVC基于标注特性的Model验证:DataAnnotationsModelValidator
- 使用容器进行应用程序路由
- MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel
- ASP.NET MVC以ModelValidator为核心的Model验证体系: ModelValidatorProviders
- 我所理解的RESTful Web API [设计篇]
- 黑箱难题阻碍了深度学习的普及与发展
- iOS 转场动画探究(一)
- XCode中如何使用事务
- 如何部署编译NDIS驱动的环境(内部资料)
- 深度学习的入门级装机配置推荐
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring security OAuth2.0认证授权学习第三天(认证流程)
- uni-app搜索历史记录功能实现
- [903]linux文件删除后磁盘空间没有释放
- Spring如何实现AOP,请不要再说cglib了!
- Redis安装问题解决方案
- 高效的5个pandas函数,你都用过吗?
- jz2440重新分区
- 腾讯云TCB云函数趣应用:巧用 puppeteer 五分钟实现一个云加社区个人成就爬虫
- NFS挂载的2种方式
- Angular Component 开发时属性和运行时属性的对照
- 第002课 ubuntu环境搭建和ubuntu图形界面操作(免费)
- 爆破cobalt strike密码脚本
- 第003课 linux入门命令详解
- 第004课 vi编辑器的使用详解
- 【前端JQ】jQuery赋值checked的几种写法,attr()方法不好使,建议使用prop()方法。