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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
JS跨域代码片段
Aug 30 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Jquery倒计时源码分享
May 16 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
php创建类并调用的实例方法
2019/09/25 PHP
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
js实现全选和全不选
2020/07/28 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python入门篇之字典
2014/10/17 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
如何用Python绘制3D柱形图
2020/09/16 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
市场总经理岗位职责
2014/04/11 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
幼儿园个人总结
2015/02/28 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Redis基本数据类型List常用操作命令
2022/06/01 Redis