vue 移动端记录页面浏览位置的方法
记录一下本次项目我使用的方法，有更简单便捷的方法，欢迎交流
描述：假设有abc页面
- 从a页面到b页面，b页面到c页面
- b到c页面的时候需要记录当前b的浏览位置，c返回到b的时候滚动到上次浏览的位置
- 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){//离开路由前
letthat=this
if(to.meta.touFlag){
letscrollTop=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){//离开路由前
letthat=this
if(to.name==='CareerAddMainTeam'){
letscrollTop=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移动端页面浏览位置内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。