ion-slide-box
を使用していますが、問題は、ion-slide
が同じ高さにないため、すべてのion-slide
を高さ1のサイズに設定することです。以下は例です
したがって、ion-slide-box
の高さは100pxになり、slide1に空白(70px)が作成されます。また、ユーザーがその空白スペース(70px)を使用してスライドすると、slider
は機能しません。
さまざまなスライドの高さでslidebox
を機能させる方法/回避策は何でしょうか?
あなたはこれを使うことができます:
.slider-slides{
display: flex;
flex-direction: row;
}
すべてのスライドが空白を残さずにスライダーの高さを埋める固定高さのスライダーが必要な場合は、style.cssに次の行を追加します。
.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
}
強いテキスト ionic 2を使用している場合は、scssを追加します。
.slide-zoom {
height: 100%;
}
このクラスをにインポートします
<ion-content class=slide-zoom>
<ion-slides>
<ion-slide>
..............
</ion-slide>
<ion-slide>
..............
</ion-slide>
</ion-slides>
</ion-content>
$ionicScrollDelegate.resize(); did the trick
チェック this codepen
より目を引くデザインの場合:
親ボックスの高さを希望の高さに設定します(例:300px)
300pxより短い画像のすべての高さをカバーするようにimgオーバーフローと最小高さを設定します。
.box img{
overflow: hidden;
min-height: 300px;
}
.slider-slides{
height:300px;
}
フレックスボックスを使用して、スライドの高さを整理できます。
.slider-slides {
display: flex;
}
スライドの高さをリセットすることを忘れないでください。すべてのスライドが最大の高さになります:)
.slider-slide {
height: auto;
}
<ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
(ionSlideDidChange)="slideDidChange()"
(ionSlideWillChange)="slideWillChange()">
</ion-slides>
// index.ts
slideDidChange () {
setTimeout( () => { this.updateSliderHeight(); }, 200);
}
slideWillChange () {
this.slidesMoving = true;
}
updateSliderHeight(){
this.slidesMoving = false;
let slideIndex : number = this.SwipedTabsSlider.getActiveIndex();
let currentSlide : Element = this.SwipedTabsSlider._slides[slideIndex];
this.slidesHeight = currentSlide.clientHeight;
console.log('index slide',slideIndex )
console.log('current slide',currentSlide )
console.log('height of slide', this.slidesHeight);
}
//データを動的にロードするためのタイムアウト。コンテンツの静的スキップタイムアウトの場合