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()
        },
  • 相关阅读:
    修改boot.ini产生彩色的启动菜单
    五行山下的猴子
    一个中文输入的类
    黑洞
    驱动中 定时
    水煮TCPMP (转)
    OGame的建筑说明
    3D数学 矩阵的更多知识(1)
    OGame银河系说明
    七则很有启迪性的心理寓言【转】
  • 原文地址:https://www.cnblogs.com/silences/p/8876978.html
Copyright © 2011-2022 走看看