热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流描述:假设有abc页面从a页面到b页面,b页面到c页面b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次浏览的位置b在返回a的时候,在从a进入b返回的是b

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

描述: 假设有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 移动端页面浏览位置内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 本文介绍了如何使用vue-awesome-swiper组件,包括在main.js中引入和使用swiper和swiperSlide组件,以及设置options和ref属性。同时还介绍了如何在模板中使用swiper和swiperSlide组件,并展示了如何通过循环渲染swipes数组中的数据,并使用picUrl属性显示图片。最后还介绍了如何添加分页器。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 本文介绍了pack布局管理器在Perl/Tk中的使用方法及注意事项。通过调用pack()方法,可以控制部件在显示窗口中的位置和大小。同时,本文还提到了在使用pack布局管理器时,应注意将部件分组以便在水平和垂直方向上进行堆放。此外,还介绍了使用Frame部件或Toplevel部件来组织部件在窗口内的方法。最后,本文强调了在使用pack布局管理器时,应避免在中间切换到grid布局管理器,以免造成混乱。 ... [详细]
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • 本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念,并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕,并且只有在手机屏幕内才能看到。最后,作者表示将在后续文章中继续探讨与View相关的内容。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 颜色迁移(reinhard VS welsh)
    不要谈什么天分,运气,你需要的是一个截稿日,以及一个不交稿就能打爆你狗头的人,然后你就会被自己的才华吓到。------ ... [详细]
  • Android获取app应用程序大小的方法
    Android获取app应用程序大小的方法-Android对这种方法进行了封装,我们没有权限去调用这个方法,所以我们只能通过AIDL,然后利用Java的反射机制去调用系统级的方法。 ... [详细]
  • 涉及的知识点-ViewGroup的测量与布局-View的测量与布局-滑动冲突的处理-VelocityTracker滑动速率跟踪-Scroller实现弹性滑动-屏幕宽高的获取等实现步 ... [详细]
  • 1、前端代码需要引入:element.min.cssvue.min.jselement.min.jsaxios.min.js  nuget里面可添加 ... [详细]
  • 最近做项目时遇到一个问题,产品搜索后出来相关的列表,点击相关商品进入它的详情,返回后组件被重新创建,但产品需求是需要保留进入 ... [详细]
  • 本文介绍了利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现。首先对观察值序列进行样本自相关系数和样本偏自相关系数的计算,然后根据这些系数的性质选择适当的ARMA模型进行拟合,并估计模型中的位置参数。接着进行模型的有效性检验,如果不通过则重新选择模型再拟合,如果通过则进行模型优化。最后利用拟合模型预测序列的未来走势。文章还介绍了绘制时序图、平稳性检验、白噪声检验、确定ARMA阶数和预测未来走势的代码实现。 ... [详细]
  • 【爬虫】关于企业信用信息公示系统加速乐最新反爬虫机制
    ( ̄▽ ̄)~又得半夜修仙了,作为一个爬虫小白,花了3天时间写好的程序,才跑了一个月目标网站就更新了,是有点悲催,还是要只有一天的时间重构。升级后网站的层次结构并没有太多变化,表面上 ... [详细]
author-avatar
赞达人
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有