Angular 滑动器滑轨不会卡住

Question

我正在尝试将 Swiper Angular library 实施到我的 Angular 10/Ionic 5 项目中。我遇到的问题是幻灯片没有卡住，看起来它只是我可以拖动的一个大页面。

这是我试过的入门示例，它显示了正确的页面，我相信，但是滑动部分似乎有点不对劲，没有卡住，如果你松开它也不会继续滑动，如图所示here.

<swiper class ="slide-pic-preview" [slidesPerView]="3" [spaceBetween]="50"
        (swiper)="onSwiper($event)" (slideChange)="onSlideChange()"
        [navigation]="true" [pagination]="{ clickable: true }">

  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

我还在构造函数中安装了导航部分所需的所有组件：

constructor() {
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); }

导航按钮除了触发 onSlideChange 事件外什么都不做，正常滑动也是如此，但不是每个页面，而是像每 20 像素我将其拖动到事件周围被触发。

并将样式导入到模块 scss 文件中。

更新：我刚刚发现调整浏览器大小 window 可以解决这个问题，现在我只需要了解如何让它开始工作

Answer 1

所以我自己找到了解决方案：

@ViewChild('swiper') swiper: Swiper;  

  ngAfterContentChecked(): void
  {
    if(this.swiper){
      // @ts-ignore
      //This really works, trust me
      this.swiper.updateSwiper({});
    }
  }

在滑动条进入用户视野后更新滑动条可解决此问题。

Answer 2

这是@R4yYs 的回答，但进行了修改以停止滑动器索引重置。否则，如果您转到另一个 page/tab.

，这会导致 Ionic/ angular 中的幻灯片索引重置为 0

 @ViewChild('swiper') swiper: Swiper;
  hasRunContentCheck = false;

  ngAfterContentChecked(): void {
    if (this.swiper && !this.hasRunContentCheck) {
      this.hasRunContentCheck = true;
      this.swiper.updateSwiper({});
    }
  }

Angular 滑动器滑轨不会卡住

Angular swiper slides don't snap

angular

typescript

ionic-framework

swiper