Swiper 无法在 Angular Ionic 应用程序中工作

Question

所以我正在尝试在角度应用程序中实现滑块。我偶然发现了 SwiperJS，它似乎可以满足我需要的一切。 第一个实现有效，我可以在图像之间滑动，但有时我还需要滚动到滑块的图像，但这不起作用。

我使用的是Swiper 9.4.1

它通过此导入在 AppComponent 中注册：

import { register } from 'swiper/element/bundle';
register();

在global.scss文件中

@import 'swiper/swiper-bundle.css';

然后我在页面模块中添加了自定义元素

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ProductInfoPageModule {}

在我的模板中，我添加了这样的滑动器：

<swiper-container class="swiperContainer" #swiperContainer>
    <swiper-slide *ngFor="let img of selectedArticle.media_gallery">
        <img [src]="img | mainPhoto : product.brand" alt="'img'" />
    </pinch-zoom>
    </swiper-slide>
</swiper-container>

最后，在页面中我使用 initSwiper() 函数初始化它，在收集完所有数据后调用：

@ViewChild('mainGrid') mainGrid: ElementRef;
@ViewChild('swiperContainer', { static: true }) swiperContainer: ElementRef;
[...]
public initSwiper(): void {
  this.swiper = new Swiper('.swiperContainer', {
    cssMode: true,
    speed: 400
  });
}

当用户点击页面时，我希望能够将 Swiper 滚动到相应的图像：

public onThumbnailClick(index: number): void {
  this.thumbnailIndex = index;
  this.swiper.slideTo(index);
}

但是当代码运行时，它会从 Swiper 库中引发此错误： 无法读取 Swiper.slideTo (slideTo.js:112:17) 处未定义的属性（读取“scrollTo”）

引发此错误的代码在这里：

wrapperEl.scrollTo()

看起来“wrapperEl”从未初始化过 我该如何纠正这个问题？

Answer 1

您必须使用类 swiper-zoom-container

将图像包装在 div 中

<swiper-container [zoom]="true">
        <swiper-slide>
            <div class="swiper-zoom-container">
                <img [src]="url" />
            </div>
        </swiper-slide>
</swiper-container>