不同载玻片高度的离子载玻片盒答案

【问题标题】：Ion-slide-box with different slide heights不同载玻片高度的离子载玻片盒
【发布时间】：2018-10-29 14:01:58
【问题描述】：

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

ion-slide 1 高度 30px
ion-slide 2 高度 100px

因此，ion-slide-box 的高度将为 100 像素，这会在幻灯片 1 中形成一个空白区域 (70 像素)。当用户使用该空白区域（70px）滑动时，slider 不起作用。

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

【问题讨论】：

好问题！我也想要答案！ -
@VVL 没有找到伴侣，但我正在研究一种解决方法，将高度设置为 100% 但仍然没有运气:)
这里也一样。有什么解决办法吗？

标签： javascript ionic-framework slide

【解决方案1】：

你可以用这个：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

它会在滑块的左侧导致垂直线。

【解决方案3】：

$ionicScrollDelegate.resize(); did the trick

检查this 的codepen

【讨论】：

这实际上不起作用，因为它计算的是幻灯片框的大小（这是最长的幻灯片）而不是幻灯片本身。

【解决方案4】：

您可以使用 flex-box 来组织幻灯片的高度：

.slider-slides {
   display: flex;
}

不要忘记重置幻灯片高度，所有幻灯片都会获得最大高度:)

.slider-slide {
   height: auto;
}

【讨论】：

【解决方案5】：

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

【讨论】：

这与 ion-slide { overflow-y: auto } 的组合对我有用。非常感谢！

【解决方案6】：

为了更吸引眼球的设计：

将父框的高度设置为您想要的高度（例如 300px）

设置 img 溢出和最小高度以覆盖小于 300 像素的图像的所有高度：

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

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

【讨论】：

【解决方案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);

  }

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

【讨论】：