Angular中ngu-carousel无前后按钮时触摸滑动不流畅求助

针对使用ngu-carousel加载100+数据时出现的移动端触摸滑动卡顿问题，可尝试以下优化方案：

1. 优化列表渲染性能 #

使用Angular的trackBy函数减少不必要的DOM重渲染，大数据量下效果显著：

修改myapp.html：

<ngu-carousel [inputs]="carouselOne">
  <ngu-item *ngFor="let freebie of data; trackBy: trackByFn">
    <!-- 你的卡片内容 -->
  </ngu-item>
</ngu-carousel>

在myapp.ts中添加trackBy函数：

trackByFn(index: number, item: any): any {
  return item.id; // 替换为你的数据唯一标识字段，比如id
}

2. 调整carousel配置参数 #

修改组件配置，降低单次渲染压力并优化触摸响应：

this.carouselOne = {
  grid: { xs: 2, sm: 2, md: 3, lg: 4, xl: 6, all: 0 },
  slide: 1, // 减少单次滑动数量，降低DOM操作量
  speed: 300, // 适当降低动画速度，提升流畅度
  interval: 0, // 关闭自动轮播，避免与触摸操作冲突
  point: { visible: true },
  load: 1, // 减少预加载数量，控制初始渲染的DOM节点数
  touch: true,
  custom: "banner",
  loop: false // 不需要循环播放时关闭，减少额外计算
};

3. 开启硬件加速优化CSS #

通过CSS属性让浏览器使用GPU加速渲染，减少卡顿：

.ngu-carousel .ngu-item {
  transform: translateZ(0);
  will-change: transform;
}
.card-block-carousel .overflowvis {
  overflow: hidden;
  will-change: scroll-position;
}

4. 启用Angular OnPush变更检测策略 #

为包含carousel的组件设置ChangeDetectionStrategy.OnPush，减少不必要的变更检测：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
  // 组件逻辑
}

5. 卡片内容懒加载 #

如果卡片内包含图片或复杂内容，用懒加载延迟加载非可视区域内容，比如借助IntersectionObserver实现：

// 在组件中实现懒加载逻辑
ngAfterViewInit(): void {
  const items = document.querySelectorAll('.ngu-item .card-content');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 加载卡片内容，比如设置图片src
        const img = entry.target.querySelector('img');
        if (img && img.dataset.src) {
          img.src = img.dataset.src;
        }
        observer.unobserve(entry.target);
      }
    });
  });
  items.forEach(item => observer.observe(item));
}

对应的HTML修改：

<ngu-item *ngFor="let freebie of data; trackBy: trackByFn">
  <div class="card-content">
    <img [attr.data-src]="freebie.imageUrl" alt="" />
    <!-- 其他内容 -->
  </div>
</ngu-item>

6. 升级ngu-carousel版本 #

检查当前组件版本，若版本较旧，升级到最新稳定版，新版本通常会修复性能问题和触摸相关的bug。

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