Swiper 10多滑块失效求助：Angular项目仅单个滑块正常工作

核心问题分析 #

你当前的实现中，两次使用document.querySelector('swiper-container')只会获取页面中第一个匹配的swiper容器，导致第二个滑块的初始化代码实际上是在修改第一个滑块的配置，而非初始化第二个滑块。此外，第二个滑块的模板存在语法错误，也会影响渲染。

修复步骤 #

1. 使用Angular的ViewChild获取单个滑块容器 #

放弃原生JS选择器，改用Angular的ViewChild来分别获取两个滑块的DOM元素，确保每个滑块都能被独立初始化。

组件代码修改：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据保持不变
})
export class YourComponent implements AfterViewInit {
  // 通过模板引用变量获取两个滑块容器
  @ViewChild('swipercat') swiperCat!: ElementRef<HTMLElement>;
  @ViewChild('swipercity') swiperCity!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    // 初始化第一个滑块
    this.initSwiperCat();
    // 初始化第二个滑块
    this.initSwiperCity();
  }

  private initSwiperCat(): void {
    const swiperEl = this.swiperCat.nativeElement as any;
    const swiperParams = {
      slidesPerView: 1,
      grid: {
        rows: 2,
        fill: "row"
      },
      navigation: true, // 注意这里应该用布尔值而非字符串"true"
      breakpoints: {
        600: {
          slidesPerView: 2,
          slidesPerGroup: 2,
        },
        900: {
          slidesPerView: 3,
          slidesPerGroup: 3,
        },
        1400: {
          slidesPerView: 4,
          slidesPerGroup: 4,
        }
      }
    };
    Object.assign(swiperEl, swiperParams);
    swiperEl.initialize();
  }

  private initSwiperCity(): void {
    const swiperEl = this.swiperCity.nativeElement as any;
    const swiperParams = {
      slidesPerView: 1,
      grid: {
        rows: 2,
        fill: "row"
      },
      navigation: true, // 修正为布尔值
      breakpoints: {
        500: {
          slidesPerView: 2,
          slidesPerGroup: 2,
        },
        900: {
          slidesPerView: 3,
          slidesPerGroup: 3,
        },
        1400: {
          slidesPerView: 4,
          slidesPerGroup: 4,
        }
      }
    };
    Object.assign(swiperEl, swiperParams);
    swiperEl.initialize();
  }

  // 其他组件方法保持不变
  submitSearch(value: any): void {
    // ...
  }
}

2. 修复第二个滑块的模板语法错误 #

第二个滑块的<swiper-slide>标签缺少闭合的>，导致DOM渲染异常：

<!-- 错误写法 -->
<swiper-slide *ngFor="let city of cities; let i = index;" 

<!-- 正确写法 -->
<swiper-slide *ngFor="let city of cities; let i = index;">

额外优化提示 #

• 将navigation: "true"改为navigation: true，Swiper的配置参数中该选项接受布尔值而非字符串。
• 如果滑块数据是异步加载的，建议在数据加载完成后再调用初始化方法，避免因DOM未渲染完成导致的初始化失败。

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