在进行vue项目页面的开发过程中,有时候会出现,滑动到页面中间位置时,跳转到其他页面,会出现页面未从顶部展示的问题,解决方法如下:
(ps:这里有一个坑,如果你直接去设置滚动位置=0,有可能是会不生效的,那就可以采用以下方式,亲测有效)
1、在store存储一个变量scrollEl,记录跳转前页面的滑动位置
computed: {
// 同步更新store存的scrollEl记录滚动位置
scrollEl () {
return this.$store.state.scrollEl
}
},
mounted () {
// 监听滚动条
window.addEventListener('scroll', this.scrollMethod, true)
// 初始化一系列函数
this.init()
},
destroyed() {
// 销毁时,删除监听滚动事件,否则其他.vue文件也会受影响
window.removeEventListener('scroll', this.scrollMethod)
},
2、在当前页面需要跳转至其他页面的地方使用:
// 先把滚动条回归到顶部,解决跳转至详情,页面未从顶部展示问题
this.$store.state.scrollEl.target.scrollTop = 0
3、扩展
如果是Keepalive情况下,想要恢复跳转前记录的位置,可以设置个变量在跳转前,记录最后的滚动位置,在activated 中给store中存储的滚动位置反向赋值。
data () {
return {
currentScroll: 0
}
}
activated () {
this.$store.state.scrollEl.target.scrollTop = this.currentScroll
// 监听滚动条
window.addEventListener('scroll', this.scrollMethod, true)
},
methods: {
// 跳转前,记录最后的滚动位置
this.currentScroll = this.$store.state.scrollEl.target.scrollTop
}
end~
希望记录的问题能帮助到你,啾咪~