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 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
ant design 日期格式化的实现
Oct 27 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入门
2006/10/09 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Django权限机制实现代码详解
2018/02/05 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python中xlutils库用法浅析
2020/12/29 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
静态成员和非静态成员的区别
2012/05/12 面试题
自我鉴定四大框架
2014/01/17 职场文书
完整版商业计划书
2014/09/15 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL