离子2/3-当屏幕宽时如何查看2张幻灯片？

Question

我搜索了一些东西，如果设备的屏幕很小的话，我可以查看一个离子幻灯片，否则应该是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>

我的问题是可以做的，例如，下面的形象，在离子&怎么做？

​

​

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>

现在幻灯片以不同的形状显示，取决于屏幕大小。

Answer 2

您必须以编程方式执行此操作。在所有情况下，最好这样做：

• 调整尺寸
• 取向变化

因此，您可能有设备类，它可以使用UA regex检查设备类型(可能不需要它，但我在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(){

  }
}

然后您可以在组件中使用数据，也可以在窗口中侦听更改。有动态的幻灯片数量。

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