ionic的ion-slides一直有不同slide的高度为最大slide的高度的问题。
如果遇到
page1:height:1400px
page2:height:932px,
两个页面的高度都会是1400px。
现在需要不同页面的高度从新计算,
我的解决方式如下
import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
class MyPage {
private slidesMoving:boolean;
private slidesHeight:number;
@ViewChild(Slides) slides: Slides;
goToSlide() {
this.slides.slideTo(2, 500);
}
}
<!-- index.html -->
<ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
(ionSlideDidChange)="slideDidChange()"
(ionSlideWillChange)="slideWillChange()">
...
</ion-slides>
// index.ts
slideDidChange () {
this.slidesMoving = false;
let slideIndex : number = this.slides.getActiveIndex();
let currentSlide : Element = this.slides._slides[slideIndex];
this.slidesHeight = currentSlide.clientHeight;
}
slideWillChange () {
this.slidesMoving = true;
}