当项目是下拉分页加载数据时,当离开页面再次回到当前页面时,数据会从第一页重新加载,这就会造成不好的体验。所以解决办法就是在离开当前页面时记录当前滚动的位置,然后再下次回到当前页面时,跳转到当前记录的位置。触底下拉加载可看下面这篇帖子:
el-scrollbar实现触底加载数据_el-scrollbar触底事件-CSDN博客
用el-scrollbar组件时,需要记录滚动的位置,需要用到scroll事件,然后通过scrollTop,因为
通过ref属性是拿不到滚动位置,所以需要通过scroll事件来记录每次滚动的位置。
<el-scrollbarv-if="state.list.length"ref="scroll"class="scrollBox"@scroll="handleScroll">
</el-scrollbar>// 记录当前滚动的位置
const handleScroll = (event: any) => {state.scrollPosition = event.scrollTop;
}
然后再离开页面时将当前滚动位置存到缓存中,但是如果有多个页面都需要记录的话,就需要区分存储的名字来进行区分,这里用到的是拼接当前路由的name属性,不会存在重复的问题。
值得注意的是:在vue页面中,一般离开页面时在事件onBeforeUnmount进行处理,但因为要拼接路由的name,在onBeforeUnmount生命周期中,拿到的name属性是跳转到新页面的name属性,而不是当前页面的,所以需要用到onBeforeRouteLeave,可以拿到当前页面的name属性来进行下一步操作。比如:
onBeforeRouteLeave(() => {if (scroll.value) {const name = route.name as string;sessionStorage.setItem(`scrollPosition-${name}`, state.scrollPosition + "");}
});
然后再进入页面时获取当前页面存储的滚动位置。然后进行跳转。这就需要用到scrollTo属性。
if (scroll.value) {const name = route.name as string;const scrollPosition =sessionStorage.getItem(`scrollPosition-${name}`) || "0";scroll.value.scrollTo({ top: scrollPosition });
}
但是会有一个衍生问题,如果加载了多页数据,也记录了当前滚动的位置,但当重新回到当前页面的时候,它只能跳到最底部,然后加载下一页的数据,并不能达到回到离开页面时记录的位置。所以这就需要下一步的操作,将数据和当前页数存储到store中,进入页面时,先从store中拉取数据和当前应该开始的页数,如果没有则拉取数据,否则就用store中存储的数据,就可以解决这一问题。
但当页面刷新时,store中的数据就会清空,但是当前页面存储的滚动位置还是在缓存中存在的,所以还会进行距离滚动。理想状态应该是页面刷新时,回到最顶部,这里解决方案就有很多,记录一下我的解决方法,用到的是监听浏览器刷新,然后刷新时,清空掉自己存储的滚动位置。
// 获取所有的缓存,然后遍历自己存储时的特殊开头,然后清空掉所有存储的滚动位置
const removeItemsWithPrefix = (prefix: any) => {// 遍历 sessionStorage 中所有的键for (let i = 0; i < sessionStorage.length; i++) {const key = sessionStorage.key(i) as any; // 获取当前的键if (key.startsWith(prefix)) {// 判断该键是否以指定的前缀开头sessionStorage.removeItem(key); // 移除该项}}
};
// "scrollPosition-" 这就是存储时所用的特殊标识
const handleBeforeUnload = () => {removeItemsWithPrefix("scrollPosition-");
};
下面是监听页面刷新和卸载监听的事件。
onBeforeUnmount(() => {window.removeEventListener("beforeunload", handleBeforeUnload);
});
onMounted(async () => {window.addEventListener("beforeunload", handleBeforeUnload);
}