vue-scroller记录滚动位置的示例代码


Posted in Javascript onJanuary 17, 2018

问题描述:

列表页进入详情页,或者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 的使用

等下周发版的时候,我贴上链接,可以体验下效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
javascript事件冒泡实例分析
May 13 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 #Javascript
详解微信小程序审核不通过的解决方法
Jan 17 #Javascript
swiper动态改变滑动内容的实现方法
Jan 17 #Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 #Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 #Javascript
angularjs 页面自适应高度的方法
Jan 17 #Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
You might like
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
js判断是否是手机页面
2017/03/17 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python实现字典嵌套列表取值
2019/12/16 Python
pytorch中的inference使用实例
2020/02/20 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
毕业生找工作求职信
2014/08/05 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android