前端-Vue3 - 列表滚动条位置定位

Xiao_zuo_ya

已于 2024-02-23 15:40:09 修改

阅读量2.1k

点赞数 9

文章标签：前端

于 2023-11-22 13:43:49 首次发布

本文链接：https://blog.csdn.net/Yue_zuozuo/article/details/134548518

版权

文章讨论了如何在Vue3应用中优化列表滚动体验，通过记录和重用滚动条位置，避免用户操作返回时重新加载数据导致的位置丢失。使用了onBeforeRouteLeave和onActivated生命周期函数以及Vue-router的keepAlive功能，最后引入自定义hook简化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：当用户的查询的列表数据过多，然后翻到很多页以后，点击查看详情，再点击返回后页面重新加载，再想看还得翻到刚才的位置，对于用户的体验不友好。
分析：

跳转到详情页面后页列表页需要记录滚动条滚动的位置。
列表页保活，不需要重新加载数据。
跳转回来后拿到记录的滚动条位置，为滚动条位置赋值。

具体实现

页面离开可以通过Vue3的生命周期中的钩子函数 onBeforeRouteLeave

  // <div class="list_wrapper" ref="companyListRef">
  // 这个就是你要记录滚动位置的div的引用
  const companyListRef = ref<any>(null);
  // 记录滚动位置
  const scrollTopY = ref<number>();
  onBeforeRouteLeave(() => {
    scrollTopY.value = companyListRef.value.scrollTop;
  });

页面重新进入也同样可以通过Vue3的生命周期函数onActivated

// 页面进入给滚动条赋值上一次的滚动位置
   onActivated(() => {
    if (scrollTopY.value) {
      fixName.value.scrollTop = scrollTopY.value;
    }
  });

页面保活可以通过 vue-router 配置 keepAlive

摘抄自Vue官网：

默认情况下，一个组件实例在被替换掉后会被销毁。
要解决这个问题，我们可以用 KeepAlive内置组件将这些动态组件包装起来
可以通过 include 和 exclude prop 来定制该行为
它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项

// 组件指定名字 这个名字要和路由配置的name 属性一直才会缓存该组件
defineOptions({
  name: 'companyList'
});

至此，上面已经完成了需求的功能，但是代码还是如果每个页面都拷贝这么多代码进去略微有些麻烦，我们在把代码升级一下，可以使用自定义hooks 函数

import { onActivated, ref } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

export const useFixScroll = (fixName: any) => {
  const scrollTopY = ref<number>();

  onActivated(() => {
    if (scrollTopY.value) {
      fixName.value.scrollTop = scrollTopY.value;
    }
  });

  onBeforeRouteLeave(() => {
    scrollTopY.value = fixName.value.scrollTop;
  });
};

在需要的地方引入hooks

// 把需要记录的滚动条的位置ref 传入到hooks 里面即可
useFixScroll(companyListRef);