记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流
描述: 假设有a b c 页面
做法: 使用到了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 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论