zoukankan      html  css  js  c++  java
  • vue 返回记住滚动条位置

    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

  • 相关阅读:
    python 小兵(4)之文件操作 小问题
    python 小兵(4)之文件操作
    排序
    Java的数据结构
    基本数据操作
    部署tomcat到Linux
    找工作的一些知识积累
    BootStrap
    操作系统
    做Global Admin
  • 原文地址:https://www.cnblogs.com/_error/p/10118257.html
Copyright © 2011-2022 走看看