角度水平文本轮播（无扩展库）

Question

我需要你的帮助来开发一个水平文本轮播（没有像 AngularUI、Material 等这样的库）。

这是一个 Stackblitz Angular 项目示例

在这张照片中，我可以滑动不同的风格（流行、波西米亚等），导航文本从左到右、从右到左移动。那么如何才能做到这一点呢？

<div class="carousel-container">    
    <ul class="search__filter__list" #categoryList>
        <li 
            *ngFor="let cat of categories; let i = index" 
            drag-scroll-item 
            (click)="setCurrentCategory(cat.label)" 
            [ngClass]="{ 'isActive': cat.label === currentCategory }"
        >
          <span class="search__filter__title">{{ cat.label }}</span>
          <span class="search__filter__icon">
            <i class="{{ cat.icon }}"></i>
          </span>
        </li>
      </ul>
  </div>

export class FilterCarouselComponent {
  currentCategory string = 'All;
  @ViewChild('categoryList', { static: false })
  categoryList!: ElementRef;

  categories: CategoryFilters[] = [
    {
      label: 'All',
      icon: 'fa fa-star',
      category: 'All',
    },
    {
      label: 'CSS',
      icon: 'fa fa-star',
      category: 'CSS',
    },
    {
      label: 'JS',
      icon: 'fa-brands fa-js',
      category: 'JS',
    },
    {
      label: 'React',
      icon: 'fa-brands fa-react',
      category: 'React',
    },
    {
      label: 'Angular',
      icon: 'fa-brands fa-angular',
      category: 'Angular',
    },
    {
      label: 'Sass',
      icon: 'fa-brands fa-sass',
      category: 'Sass',
    },
    {
      label: 'NodeJS',
      icon: 'fa-brands fa-node-js',
      category: 'NodeJS',
    },
  ];

  constructor(
    public darkModeService: DarkModeService,
    private scroll: ViewportScroller
  ) {}

  setCurrentCategory(category: string) {
    this.currentCategory = category
  }

  onWheel(event: WheelEvent): void {
    if (event.deltaY > 0) this.scrollToRight();
    else this.scrollToLeft();
  }

  scrollToLeft(): void {
    console.log('test');
  }

  scrollToRight(): void {
    console.log('test 2');
  }
}

Answer 1

如果你想通过左箭头和右箭头实现选择，那么，你可以为这些HTML元素添加一个事件并处理选择逻辑，如下所示：

<section class="container" id="filter">
  <!-- forward() for click event  -->
  <div class="arrow left" (click)="forward()">
    <i class="fa fa-chevron-left"></i>
  </div>

  <div class="carousel-container">
    <ul class="search__filter__list" #categoryList>
      <li
        *ngFor="let cat of categories; let i = index"
        (click)="setCurrentCategory(cat.label); indexSelected = i"
        [ngClass]="{
          isActive: cat.label === currentCategory && indexSelected === i
        }"
      >
        <span class="search__filter__title">{{ cat.label }}</span>
        <span><i [class]="cat.icon"></i></span>
      </li>
    </ul>
  </div>

  <!-- backward() for click event  -->
  <div class="arrow right" (click)="backward()">
    <i class="fa fa-chevron-right"></i>
  </div>
</section>

组件.ts

@Component({...})
export class Component {
 ...
 ... 
 indexSelected = 0;
 
 forward(): void {
    if (this.indexSelected > 0) {
      --this.indexSelected;
      this.setCategory();
    }
  }

  backward(): void {
    if (this.indexSelected < this.categories.length - 1) {
      ++this.indexSelected;
      this.setCategory();
    }
  }

  private setCategory(): void {
    const label = this.categories[this.indexSelected].label;
    this.currentCategory = label;
  }
}

这是演示