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

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

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

具体实现

  1. 页面离开可以通过Vue3的生命周期中的钩子函数 onBeforeRouteLeave
  // <div class="list_wrapper" ref="companyListRef">
  // 这个就是你要记录滚动位置的div的引用
  const companyListRef = ref<any>(null);
  // 记录滚动位置
  const scrollTopY = ref<number>();
  onBeforeRouteLeave(() => {
    scrollTopY.value = companyListRef.value.scrollTop;
  });
  1. 页面重新进入也同样可以通过Vue3的生命周期函数onActivated
// 页面进入给滚动条赋值上一次的滚动位置
   onActivated(() => {
    if (scrollTopY.value) {
      fixName.value.scrollTop = scrollTopY.value;
    }
  });
  1. 页面保活可以通过 vue-router 配置 keepAlive

摘抄自Vue官网:

  1. 默认情况下,一个组件实例在被替换掉后会被销毁。
  2. 要解决这个问题,我们可以用 KeepAlive内置组件将这些动态组件包装起来
  3. 可以通过 includeexclude prop 来定制该行为
  4. 它会根据组件的 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);
  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件,它是 `ag-Grid`(一个功能强大的数据表格和网格组件库)在 Vue 框架中的实现。滚动条触底加载更多(Infinite Scroll or Virtual Scrolling)是 ag-Grid 提供的一种功能,用于在用户滚动到表格底部时自动加载更多行,而不是一次性加载所有数据,从而提高性能和用户体验。 在 ag-Grid-Vue 中实现滚动条触底加载更多的步骤通常包括: 1. 配置列:在 ag-Grid 的列定义中启用 `infiniteScroll` 属性,并设置 `scrollThreshold` 参数,指定当滚动到底部多少距离时触发加载。例如: ```html <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue> ``` 这里 `100` 表示当滚动条距离底部小于100px时开始加载更多数据。 2. 数据分页:你需要确保数据源是分页的,可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围,然后从后向前逐页加载。 3. 加载事件处理:在 Vue 组件中监听 `onGridReady` 或其他适当的事件,当滚动到底部时触发加载更多数据的请求,并更新数据源。示例: ```javascript mounted() { this.gridApi.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(params) { if (params.isEnd && params.isLastRenderedPage) { // 加载更多数据 this.loadMoreData(); } }, loadMoreData() { // 假设你有一个接口 `loadNextPage` 用于请求更多数据 this.loadNextPage().then(() => { // 更新行数,告诉 ag-Grid 加载完成 this.gridApi.sizeColumnsToFit(); }); } } ``` 4. 更新视图:加载新数据后,你需要将其添加到现有数据的末尾,并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值