Ionic 5 Angular：离子滑动水平滑动在设备上不起作用答案

【问题标题】：Ionic 5 Angular: ion-slides horizontal sliding not working on deviceIonic 5 Angular：离子滑动水平滑动在设备上不起作用
【发布时间】：2020-04-01 19:22:22
【问题描述】：

我正在尝试使用 ion-slides，但它仅适用于浏览器，不适用于 iOS 或 Android 设备。我不能在幻灯片之间滑动。

** 我注意到这个问题只有在加载动态数据时才会出现。因此，如果在 ngOnInit() 中，必要的 ArrayObject 填充了数据。如果 ArrayObject 是静态的，那么整个事情都可以正常工作。

** 一旦我旋转我的设备/屏幕，即交叉视图，从那一刻起，滑块上的也将起作用。

谢谢！

HTML 文件

    <ion-header>
      <ion-toolbar color="primary">

        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>

        <ion-title>?</ion-title>

      </ion-toolbar>
    </ion-header>


    <ion-content class="ion-no-margin ion-no-padding" style="--background: #f4f4f4">

      <ion-slides id="sliderDetail" #sliderDetail>
        <ion-slide *ngFor="let elem of elements">

          <ion-card>
            <ion-card-content>
              <h2>{{elem.title}}</h2>
              <p>{{elem.content}}</p>
            </ion-card-content>
          </ion-card>

        </ion-slide>
      </ion-slides>

    </ion-content>

TS-文件

export class DetailsPage implements OnInit, AfterViewInit {
  @ViewChild('sliderDetail', { static: false }) sliderDetail: IonSlides;

  elements: Array<any>;

  ...

ngOnInit() {
  this.getData();
}


async getData() {
    let ret = await Storage.get({ key: 'elements' });
    this.elements = await JSON.parse(ret.value);

    await this.sliderDetail.update();
    await this.sliderDetail.updateAutoHeight();
}

【问题讨论】：

标签： html angular typescript ionic-framework

【解决方案1】：

我的解决方案是：

setTimeout(()=> {
      this.slides.lockSwipes(true);
}, 300);

【讨论】：