时间戳

首页 > 解决方案 > 在ionic4中旋转时如何解决自动播放问题？

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

问题描述

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

<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>

在使用slideConfigoptions之前，幻灯片运行良好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 像素的卡片。即使在旋转之后，哪个始终是 120 像素？旋转卡前滑动正常，但旋转后卡滑动太快。那么我该如何解决这个问题呢？

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

标签： ionic-frameworkionic4ion-slides

解决方案

尝试这个：

组件.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>

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

推荐阅读