• 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

  • 相关阅读:
    Mac 删除Openfire
    FMDB使用
    豆瓣restful api 状态和错误码
    豆瓣开放api
    常用文字配色方案
    电商网站参考
    HP后端跨域HEADER头
    PHP统计 图表实现方法
    PHP 全过程教程和测试网
    Ajax技术在购物车中的应用(PHP篇)
  • 原文地址:https://www.cnblogs.com/_error/p/10118257.html
Copyright © 2020-2023  润新知