javascript - Ionic 2/3 - 如何在屏幕较宽时查看 2 张幻灯片？

Question

我搜索了一些东西，如果设备的屏幕很小，它可以让我查看 1 个 ionic 幻灯片，否则它应该是 2 个 ionic 幻灯片，但我找不到解决方案

例如，我使用这段代码查看了一张幻灯片和另一张幻灯片的一部分

<ion-slides slidesPerView="1.125">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
</ion-slides>

这个其他代码允许我查看 2 张幻灯片

<ion-slides slidesPerView="2.125">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
</ion-slides>

我的问题有可能在 ionic & How 中制作如下图示例？

Answer 1

经过努力和多次测试，我可以找到我认为最好的解决方案..

这是我的解决方案

首先我写了一个函数来检查屏幕宽度并返回 1.125 或 2.125

checkScreen(){
    if(window.innerWidth>=960){
        return 2.125;
    }else{
        return 1.125;
    }
}

然后我在 HTML 中做了这些改动

<ion-content (ionChange)="checkScreen()">
    <ion-slides [slidesPerView]="checkScreen()">
        <ion-slide>
            <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 2</h1>
        </ion-slide>
    </ion-slides>
</ion-content>

现在幻灯片根据屏幕大小以不同的形状显示