Question

我正在使用ion-slide-box，但问题是，我的ion-slide s的高度不同，所以它将所有ion-slide s设置为高度的大小一。以下是一个例子

离子滑动1高度30px
ion-slide 2 height 100px

因此，ion-slide-box高度将为100px，这会在slide1中产生一个空白区域（70px）。当用户使用该空白区域（70px）进行滑动时，slider无法正常工作。

slidebox适用于不同幻灯片高度的方法/解决方法是什么？

Answer 1

您可以使用：

.slider-slides{
  display: flex;
  flex-direction: row;
}

Answer 2

如果您想要一个固定高度滑块，每个幻灯片都会填充滑块高度而不留任何空白区域，在style.css中添加以下行：

.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
 color: #000;
 background-color: #fff;
 height: 100%;
}

Answer 3

强文如果你使用离子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>

Answer 4

$ionicScrollDelegate.resize(); did the trick

检查this是否有代码簿

Answer 5

您可以使用弹性框来组织幻灯片高度：

.slider-slides {
   display: flex;
}

不要忘记重置幻灯片高度，所有幻灯片将获得最大高度：）

.slider-slide {
   height: auto;
}

Answer 6

更多的眼睛缓存设计：

将父框的高度设置为所需的高度（exmp 300px）

设置img overflow和min height以覆盖小于300px的图像的所有高度：

.box img{
    overflow: hidden;
    min-height: 300px;

}
.slider-slides{
    height:300px;
}

Answer 7

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

  }

//用于动态加载数据的超时。如果您的内容静态跳过超时

离子滑动盒具有不同的滑动高度

7 个答案: