• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

keep-alive之前也用的比较玄学吧,后来发现,keep-alive只能缓存当前级页面,也就是说:

如果keep-alive缓存了A和B这些同级的路由页面或者组件,那是没问题的,但是如果A页面下还有子级路由或者子组件切换,由于嵌套太深,一般是缓存不到的,所以又需要使用一次keep-alive。

但是在使用keep-alive的时候遇到一个问题啊,这个问题很烦。

虽然keep-alive缓存后,页面的滚动条位置也会相对应的缓存到,但是,正因为这个位置问题,导致A页面如果滚动了,在进入他的子路由页面的时候,子路由页面的滚动条位置会和A页面保持一致,这就很头疼了。

找了半天发现一个绝妙的方式:

methods:{
  scrollToTop() {
    window.scrollTo(0, 0);
  }
},
activated() {
  //滚动条归零
  this.scrollToTop();
}

就这两句话搞定,妙啊,测试火狐和谷歌都没问题,activated为启用缓存后的组件或页面激活时的生命周期,可以理解为created的替代品

使用了这个方法,当前页面滚动条位置得以保存,下一个子级页面滚动可以默认归零,页面从子级页面点击返回后,当前的页面滚动条位置保持不变,这真是一个妙哉方法,好用啊

0
  • 本文分类:vue 项目实战
  • 本文标签:keep-alive滚动条位置
  • 流行热度:已超过 241 人围观了本文
  • 最后更新:2020年07月16日 - 16时02分12秒
  • 发布日期:2020年07月16日 - 16时02分12秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码