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

    list页面要使用keep-alive,这里再app.vue里判断

    app.vue

        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

    router.js

    使用history模式 scrollBehavior里是具体代码,一开始是在scrollBehavior里获取

     document.documentElement.scrollTop || document.body.scrollTop;但是第一次进入页面的时候滚动页面高度无法获取,所以就在list.vue里
    beforeRouteLeave方法里设置高度,然后就可以在scrollBehavior return相应的高度了

    export default new Router({
      mode: "history",
      base: "/m/",
      scrollBehavior(to, from, savedPosition) {
      return { x: 0, y: to.meta.savedPosition || 0 };
    },
    routes: [
      {
        path: "/",
        name: "list",
        component: List,
        meta: { keepAlive: true }
      } 
    ]
    });

    list.vue

        beforeRouteLeave(to, from, next) {
          let position = document.documentElement.scrollTop || document.body.scrollTop;
          from.meta.savedPosition = position;
          next()
        },
  • 相关阅读:
    My Tornado Particle Effect
    [zz] 海洋环境的光能传递
    一道算法题
    Alembic
    一些莫名其妙的东东
    Python Q&A
    <<Exceptional C++>> notes
    CG Rendering v.s. Browser Rendering
    Modo
    Katana
  • 原文地址:https://www.cnblogs.com/silences/p/8876978.html
Copyright © 2011-2022 走看看