vue 移动端记录页面浏览位置的方法


Posted in Javascript onMarch 11, 2020

记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流

描述: 假设有a b c 页面

  1. 从a页面 到 b页面 ,b页面到c页面
  2. b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次浏览的位置
  3. b在返回a的时候,在从a进入b 返回的是b的顶部(也就是不记录浏览位置)

做法: 使用到了vuex ,beforeRouteLeave

1.首先在vuex中state定义一个变量来记录当前的浏览的位置

//state中定义数据
 state: {
  carrerTouScroll: {
   height: '' //滚动的距离
   }
  }
 
 
 //mutations 操作state数据
 mutations: {
  setCarrerTouScroll (state, disdance) { //管理赛事 滚动距离
   state.carrerTouScroll.height = disdance
  },
 }
 
 
 //使用getters 有的不加这句也可以,但是有时候不加就不行,所以还是加上吧
  getters: {
   getCarrerTou: state => state.carrerTouScroll 
   }

2.在需要的页面中 我使用了beforeRouteLeave 来记录没有路由离开的时候当前浏览的位置

beforeRouteLeave (to, from, next) { // 离开路由前
  let that = this
  if (to.meta.touFlag) {
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   this.$store.commit('setCarrerTouScroll', scrollTop)
  } else {
   this.$store.commit('setCarrerTouScroll', 0)
  }
  next()
 },

其中to.meta.touFlag 是我自己定义的,因为需要记录的页面很多,我觉的这样比较方便,只需要在route 页面加一个参数就好了

{
  path: '/careerAddMainTeam',
  name: 'CareerAddMainTeam',
  component: CareerAddMainTeam,
  meta: {
   touFlag: true
  }
 },

当然你也可以使用to.name ,如果需要跳转页面不多的话

beforeRouteLeave (to, from, next) { // 离开路由前
  let that = this
  if (to.name === 'CareerAddMainTeam') {
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   this.$store.commit('setCarrerTouScroll', scrollTop)
  } else {
   this.$store.commit('setCarrerTouScroll', 0)
  }
  next()
 },

3.最后一步就是在每次b页面获取完数据的时候使用$nextTick,让页面恢复到上次浏览的位置

this.$nextTick(() => {
      this.scrollTop = this.$store.state.carrerTouScroll.height
      document.documentElement.scrollTop = this.scrollTop
     })

一定要在b页面获取完数据后使用nextTick,不然是没有效果的

这次就记录到这,如果有别的好方法,请指出

到此这篇关于vue 移动端记录页面浏览位置的方法的文章就介绍到这了,更多相关vue 移动端页面浏览位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
js生成随机数方法和实例
Jan 17 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
微信小程序 POST请求的实例详解
Sep 29 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
You might like
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python创建学生管理系统
2019/11/22 Python
Python 如何查找特定类型文件
2020/08/17 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
社区党员公开承诺书
2014/08/30 职场文书
市场督导岗位职责
2015/04/10 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Python中re模块的元字符使用小结
2022/04/07 Python