Angular CDK虚拟滚动下拉刷新实现及滚动卡顿问题解决方案

一、快速滚动卡顿的优化方案 #

• 优化数据追踪逻辑：给*cdkVirtualFor绑定trackBy函数，避免滚动时不必要的DOM节点重建。示例：

  <cdk-virtual-scroll-viewport itemSize="60">
    <div *cdkVirtualFor="let item of items; trackBy: trackItemById">{{ item.name }}</div>
  </cdk-virtual-scroll-viewport>
  

  trackItemById(index: number, item: any): number {
    return item.id;
  }
  

• 固定列表项高度：如果业务场景允许，明确设置itemSize属性，让CDK提前计算视口内需要渲染的条目数量，避免动态计算高度带来的性能损耗。
• 简化列表项DOM结构：减少列表项内的嵌套层级和不必要的DOM元素，避免复杂样式（比如大量position: absolute或频繁重绘的CSS属性），降低渲染成本。
• 避免滚动时的同步计算：不要在滚动事件回调中执行数据转换、过滤等同步操作，可将这类逻辑移到数据初始化阶段，或用防抖函数延迟执行。

二、下拉刷新功能实现 #

基于CDK虚拟滚动视口的原生事件监听即可实现下拉刷新，步骤如下：

1. 获取虚拟滚动视口实例，监听触摸/鼠标事件判断下拉动作
2. 触发刷新时显示加载状态，完成后重置视口位置

示例代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-virtual-list',
  templateUrl: './virtual-list.component.html'
})
export class VirtualListComponent implements AfterViewInit {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
  items: any[] = [];
  isRefreshing = false;
  private startY = 0;

  ngAfterViewInit(): void {
    const element = this.viewport.elementRef.nativeElement;
    // 监听触摸开始事件
    element.addEventListener('touchstart', (e: TouchEvent) => {
      this.startY = e.touches[0].clientY;
    });
    // 监听触摸移动事件，判断下拉动作
    element.addEventListener('touchmove', (e: TouchEvent) => {
      const currentY = e.touches[0].clientY;
      const scrollTop = this.viewport.measureScrollOffset('top');
      // 滚动到顶部且下拉距离超过50px，同时未在刷新中
      if (scrollTop <= 0 && currentY - this.startY > 50 && !this.isRefreshing) {
        this.triggerPullRefresh();
      }
    });
    // 鼠标场景可补充mousedown/mousemove事件监听
  }

  triggerPullRefresh(): void {
    this.isRefreshing = true;
    // 模拟数据刷新请求
    setTimeout(() => {
      // 替换为实际的刷新接口调用
      const newItems = [...this.items];
      newItems.unshift({ id: Date.now(), name: '新添加的条目' });
      this.items = newItems;
      // 刷新完成后滚动到顶部
      this.viewport.scrollToIndex(0);
      this.isRefreshing = false;
    }, 1500);
  }
}

在模板中添加刷新状态提示：

<cdk-virtual-scroll-viewport itemSize="60" class="viewport">
  <!-- 下拉刷新提示 -->
  <div *ngIf="isRefreshing" class="refresh-tip">正在刷新...</div>
  <div *cdkVirtualFor="let item of items; trackBy: trackItemById" class="list-item">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

额外提示 #

如果卡顿问题持续存在，可尝试调整cdkVirtualFor的renderOutsideViewport属性为false，减少视口外的预渲染数量，但可能会导致滚动到边缘时出现短暂空白，需根据实际场景权衡。

内容的提问来源于stack exchange，提问作者Vinu PR