加载器关闭调用会将滑块转到当前页面

Question

我有一个刷卡机和装载机。场景非常简单。 每当执行一些计算时，它就会初始化加载器，在我们获得成功结果后，关闭加载器并切换到第二张幻灯片。

 <swiper-container #slides [allowTouchMove]="false" pagination="false">
    <swiper-slide
      >Slide 1

      <ion-button (click)="changeSlide()" mode="md">Change slide 1</ion-button>
    </swiper-slide>
    <swiper-slide
      >Slide 2
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 2</ion-button
      ></swiper-slide
    >
    <swiper-slide
      >Slide 3
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 3</ion-button
      ></swiper-slide
    >
  </swiper-container>

每当关闭加载程序时，滑动器都会滑动到下一页并再次返回。

 async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Loading...',
    });
    return await loading.present();
  }

  public async changeSlide(): Promise<void> {
   this.presentLoadingOverlay()
      .then((data: any) => {
        data.present();
         this.slideNext(),
          setTimeout(() => {
            data.dismiss();
          }, 3000);

        data.onDidDismiss().then(() => {
          console.log('Loading dismissed! after 3 Seconds');
        });
      })

}

即使放入 this.slideNext()，超时后也不会改变任何东西。取消呼叫将返回当前页面

Answer 1

试试这个方法：

async changeSlide() {
  //show loader before slide change.
  await  this.presentLoading();

  // after loader is visible change slide
  this.slideNext();

  // now after slides change remove loader
  await this.stopLoading();

}

PS：创建

stopLoading

函数来隐藏加载程序。

Answer 2

这里解决了： https://github.com/ionic-team/ionic-framework/issues/28058

这里的问题是当离子加载被解除时，焦点返回到呈现它的元素。在这种情况下，幻灯片 0 中的离子按钮获得焦点。 Swiper 在 https://github.com/nolimits4web/swiper/blob/1cc359e45d637c209ce97ebffb917ae8587fdcf2/src/modules/a11y/a11y.mjs#L220 中有逻辑，用于在幻灯片内部的元素聚焦时向幻灯片显示。由于幻灯片 0 中的按钮处于焦点状态，因此这会有效地取消或撤消您的手动 SlideNext 调用。

这两种行为都是有意的可访问性功能。根据 https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/，对话框应将焦点返回到调用对话框的元素。

您可以通过将显示装载情况的离子按钮移动到刷卡器容器之外来避免这种碰撞。