在ionic4中旋转时如何解决自动播放问题？

Question

我在我的项目中使用了离子幻灯片。代码如下：

<ion-grid class="ion-margin-left">
    <ion-slides [options]="slideConfig">
        <ion-slide *ngFor="let item of items">
            <ion-card style="margin-right: 2px">
                <div class="img-container">
                    <img src="/assets/contents/gif_icon/{{item.imgName}}" class="img-style">
                </div>
                <ion-card-content>
                    <p>{{item.title}}</p>
                </ion-card-content>
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-grid>

在使用 slideConfig 选项 autoplay: true 之前，幻灯片运行良好。幻灯片配置选项代码如下。

this.slideConfig = {
   slidesPerView: window.innerWidth / 140,
   autoplay: true
};
  @HostListener('window:resize', ['$event'])
  onResize(event) {

  this.slideConfig = {
    slidesPerView: window.innerWidth / 140,
    autoplay: true
  };
}

问题主要发生在我旋转屏幕时。我正在尝试显示宽度为 120 像素的卡片。即使在旋转之后，哪个始终是 120px？旋转前卡滑动正常，但旋转后卡滑动太快。那么我该如何解决这个问题呢？

请注意一件事，每当我旋转slidesPerView 将是dynamic。例如，在portrait 模式下，slidesPerView 可能是3，对于device。对于同一个设备，如果用户旋转设备，那么slidesPerView 可能是 5。为了实现这一点，我使用了@HostListener('window: resize') 函数。但是如果我在portrait 模式下加载项目，那么如果我旋转设备，那么autoplay 会稍微快一点。我知道问题的发生是因为slidesPerView 是动态的。但我无法修复slidesPerView，同时幻灯片需要自动播放。我怎样才能做到这一点？

Answer 1

试试这个：

组件.ts

import { Component, HostListener, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('slides',null) slides: IonSlides;

  slideOpts = {
    slidesPerView: 1,
    autoplay: true,
    speed: 600,
    slidesPerColumn: 'auto'
  };

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    setTimeout(() => this.slides.update(), 100); 
  }
  constructor() { }

}

HTML

<ion-slides pager="true" [options]="slideOpts" #slides>
</ion-slides>

如果您想在选项中使用属性速度，您可以将速度更改为更快或更慢。