码迷,mamicode.com
首页 > 其他好文 > 详细

vue 返回记住滚动条位置

时间:2018-12-14 12:59:45      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:判断   bsp   scrollto   表示   导航   live   ext   针对   some   

vue 项目返回上一页,滚动到离开时的位置,网上能找到不少方法,以下尝试一种。

例如,首页有个列表,点击列表进入二级页面,返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = ‘Home‘ 的组件进行缓存

<keep-alive include=‘Home‘>
  <router-view/>
</keep-alive>

然后,在首页的 Home 组件内,使用  beforeRouteLeave  ,组件内的路由导航守卫,路由离开前,获取滚动高度,并记录在 data 中,当再次进入首页,判断是否存在这个滚动高度,若存在,则设置高度,否则置为 0 

data:{
    homeTop : 0,
},

activated(){
    // do something
    console.log(‘activated home‘)
    document.getElementById(‘app‘).scrollTop = this.homeTop || 0
},
beforeRouteLeave (to, from, next) {
    // console.log(‘leave‘)
    let app = document.getElementById(‘app‘)
    this.homeTop = app.scrollTop || 0
    next()
},

end

vue 返回记住滚动条位置

标签:判断   bsp   scrollto   表示   导航   live   ext   针对   some   

原文地址:https://www.cnblogs.com/_error/p/10118257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!