返回上一页面保持之前的滚动条位置
- Vue
- 2023-04-19
- 45 热度
- 0 评论
前言
- h5 移动端项目,列表返回详情,需要保持之前位置不变。
实现方式
- 需要保持滚动条的页面路由做标记。
- 路由钩子监听需要保持滚动的页面的滚动高度并保存。
- 进入页面时,如果有路由标记,则直接设置滚动高度,否则不变。
代码实现
// router/index.js
{
path: "/user",
name: "user",
component: () => import("../views/user.vue"),
meta: { scrollTop: 0, keepScroll: true }
},
// ...
// ...
router.beforeEach((to, from, next) => {
// 记录需要缓存页面的滚动条高度
if (from.meta.keepScroll) {
const $content = document.querySelector("#app");
const scrollTop = $content ? $content.scrollTop : 0;
from.meta.scrollTop = scrollTop;
}
next();
});
// utils/index.js
export const getScroll = vm => {
const scrollTop = vm.$route.meta.scrollTop;
const $content = document.querySelector('#app');
if (scrollTop && $content) {
$content.scrollTop = scrollTop;
}
};
// user.vue
import * as util from '@/utils/';
activeted() {
// 保持滚动条
util.getScroll(this);
}
方式2
App.vue页面中使用keep-alive缓存组件
<template>
<div id="app">
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
路由配置里 在需要被缓存的页面meta里配置keepAlive属性
{
path: '/index',
name: 'index',
meta: {
title: ' ',
keepAlive: true,//此组件需要被缓存
},
component: () => import('@/components/index'),
},
实现页面回退之后重新加载,与methods平级写beforeRouteLeave钩子函数,表示在路由页面离开时执行,将该页面的keepAlive属性设为false
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
在详情页配置,页面返回时设置列表页keepAlive为true
beforeRouteLeave (to, from, next) {
if (to.path == "/index") {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
},