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转盘抽奖功能实现
Nov 13 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
纯JS实现五子棋游戏
May 28 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
JavaScript实现随机点名小程序
Oct 29 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
JS解析XML的实现代码
2009/11/12 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
explicit和implicit的含义
2012/11/15 面试题
三个Unix的命令面试题
2015/04/12 面试题
法学专业求职信
2014/07/15 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
高二语文教学反思
2016/02/16 职场文书
python基础之while循环语句的使用
2021/04/20 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电