vue滚动行为

有人问道如何记录vue页面的滚动条位置,再次载入组件的时候页面滚动到记录的位置?


思路:
记录滚动条位置我们好记

我们要在组件销毁之前也就是页面跳转的时候 需要用到生命周期beforeDistory将位置记录下来
你可以存到vue中 那么如果我们用了keep-alive怎么办 他不会销毁组件啊 ?

那么我们就用到keep-alive的生命周期 的deactivated钩子中将位置记录下来

等到再次回到页面的时候 就需要等到 组件完全加载完毕 再设置滚动条的位置 
这里我们用到vm.$nextTick()这个方法 来检测组件载入完毕 

用到vue提供的方法scrollBehavior
 scrollBehavior (to, from, savedPosition) {
  //如果有存入的位置就会滚到该位置,否者返回到页面顶部
  if (savedPosition) {
    return savedPosition
  } else {
    if (to.hash) {
      return {selector: to.hash}
    }
  }
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值