监听滚动条在跳转页面的时候重置为0,即回到顶部

在进行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~
希望记录的问题能帮助到你,啾咪~

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值