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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
微信小程序实现时间戳格式转换
Jul 20 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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中pack、unpack的详细用法
2018/03/12 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
package.json文件配置详解
2017/06/15 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
社区八一活动方案
2014/02/03 职场文书
导购员的岗位职责
2014/02/08 职场文书
班组长竞聘书
2014/03/31 职场文书
新书发布会策划方案
2014/06/09 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2014年库房工作总结
2014/11/26 职场文书
解除租房协议书
2014/12/03 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
小学班主任教育随笔
2015/08/15 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
JavaScript中reduce()的用法
2022/05/11 Javascript