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

Ion-slide-box with different slide heights

本文关键字：高度      更新时间：2023-09-26

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

  • 离子载玻片1高30px
  • 离子载玻片2高100px

因此，ion-slide-box的高度将为100px，这将在幻灯片1中留出一个空白（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%;
} 

$ionicScrollDelegate.resize(); did the trick

检查代码笔

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

.slider-slides {
   display: flex;
}

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

.slider-slide {
   height: auto;
}

strong文本如果您使用的是离子2比添加一个scs。

 .slide-zoom {
  height: 100%;
  }

并在中导入此类

<ion-content class=slide-zoom>
   <ion-slides>
   <ion-slide>
 ..............
     </ion-slide>

   <ion-slide>
 ..............
     </ion-slide>
   </ion-slides>

     </ion-content>

用于更直观的缓存设计：

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

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

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

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

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

相关文章：