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

Question

我搜索了一些可以让我在设备屏幕较小的情况下查看 1 个离子幻灯片的东西，否则它应该是 2 个离子幻灯片，但我找不到解决方案

例如，我使用此代码查看了 1 张幻灯片和其他幻灯片的一部分

<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

您必须以编程方式进行。最好对所有情况都这样做：

调整大小
方向改变

因此您可能有设备 class，它将能够检查设备类型，使用 UA 正则表达式（也许不需要，但我在 github 上看到了很好的例子）。

interface DeviceData {
  widht:number;
  type:any;
  orientation:any;
}

class Device{

  public onRezise = new EventEmitter();
  public onOrientationChange = new EventEmitter();

  constructor(){

    //add listeners for resize and orientation change
  }

  public getWidth(){

  }

  public getOrientation(){

  }

  public getDeviceType(){

  }
}

然后你可以在你的组件中使用数据，也可以监听 window 中的变化。并具有动态数量的幻灯片。

   class Component {
      constructor(private _device:Device){

      }

      ngOnInit(){
        this._device.onOrientationChange.subscribe((v:DeviceData) => this.setNumberOfSlides(v));
        this._device.onRezise.subscribe((v:DeviceData) => this.setNumberOfSlides(v));
      }

      private setNumberOfSlides(data:DeviceData){
        this._numberOfSlides = data.widht/slideWidth;
      }
    }

Answer 2

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

这是我的解决方案

首先我写了一个函数来检查屏幕宽度 return 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>

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

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

Ionic 2 / 3 - How to view 2 slides when screen is wide?

html

javascript

typescript

ionic2

ionic3