Angular无依赖横向文本轮播组件开发技术求助

问题说明 #

需要开发一个不依赖AngularUI、Material等第三方库的横向文本轮播组件，实现导航文本（如示例中的All、CSS等）的左右滑动效果。现有组件代码中scrollToLeft和scrollToRight方法尚未实现功能，需完成这两个方法的逻辑，同时支持滚轮触发滑动。

完整实现步骤 #

1. 补全CSS样式 #

为轮播容器和列表添加必要样式，确保横向布局与滚动行为：

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.search__filter__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scroll-behavior: smooth; /* 开启平滑滚动 */
  /* 隐藏滚动条（可选） */
  scrollbar-width: none;
}

.search__filter__list::-webkit-scrollbar {
  display: none;
}

.search__filter__list li {
  flex-shrink: 0; /* 禁止列表项收缩 */
  padding: 8px 16px;
  cursor: pointer;
  margin-right: 8px;
}

.search__filter__list li.isActive {
  font-weight: bold;
  /* 自定义激活状态样式 */
}

2. 修复组件类语法并实现滚动方法 #

修正原代码语法问题，完成scrollToLeft和scrollToRight核心逻辑：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { DarkModeService } from './path-to-dark-mode-service'; // 替换为实际服务路径

interface CategoryFilters {
  label: string;
  icon: string;
  category: string;
}

@Component({
  selector: 'app-filter-carousel',
  templateUrl: './filter-carousel.component.html',
  styleUrls: ['./filter-carousel.component.css']
})
export class FilterCarouselComponent {
  currentCategory: string = 'All'; // 修正语法错误
  @ViewChild('categoryList', { static: false })
  categoryList!: ElementRef<HTMLUListElement>;

  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) {}

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

  onWheel(event: WheelEvent): void {
    event.preventDefault(); // 阻止页面纵向滚动
    event.deltaY > 0 ? this.scrollToRight() : this.scrollToLeft();
  }

  scrollToLeft(): void {
    // 每次向左滚动150px，可根据需求调整距离
    this.categoryList.nativeElement.scrollBy({ left: -150, behavior: 'smooth' });
  }

  scrollToRight(): void {
    // 每次向右滚动150px，可根据需求调整距离
    this.categoryList.nativeElement.scrollBy({ left: 150, behavior: 'smooth' });
  }
}

3. 更新模板绑定滚轮事件 #

在容器上绑定滚轮事件，确保滚轮操作触发横向滑动：

<div class="carousel-container" (wheel)="onWheel($event)">    
    <ul class="search__filter__list" #categoryList>
        <li 
            *ngFor="let cat of categories; let i = index" 
            (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>

关键逻辑说明 #

• scrollBy方法：通过DOM元素的scrollBy方法控制横向滚动，left参数定义滚动距离，behavior: 'smooth'实现平滑过渡效果。
• 滚轮事件处理：绑定wheel事件并阻止默认纵向滚动，根据deltaY值判断滚动方向，触发对应滚动方法。
• CSS布局：使用flex布局让列表项横向排列，overflow-x: auto开启横向滚动能力，配合scroll-behavior实现平滑滚动。

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