javascript 不同载玻片高度的离子载玻片盒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28401940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ion-slide-box with different slide heights
提问by sameera207
I'm using ion-slide-box, but the issue is, my ion-slides are not in the same height, So it sets all the ion-slides to the size of heights one. Following is an example
我正在使用ion-slide-box，但问题是，我的ion-slides 不在同一高度，因此它将所有ion-slides设置为高度为 1 的大小。下面是一个例子
- ion-slide 1 height 30px
- ion-slide 2 height 100px
- 离子幻灯片 1 高度 30px
- 离子幻灯片 2 高度 100px
So, ion-slide-boxheight will be 100px, which make a blank space (70px) in the slide1. And when the user slide by using that blank space (70px), sliderdoesn't work.
因此，ion-slide-box高度将为 100 像素，这会在幻灯片 1 中形成一个空白区域 (70 像素)。当用户使用该空白区域（70px）滑动时，slider不起作用。
What could be the way/workaround to have the slideboxwork for different slide heights?
slidebox针对不同的幻灯片高度进行工作的方法/解决方法是什么？
回答by MrP
You can use this :
你可以使用这个：
.slider-slides{
display: flex;
flex-direction: row;
}
回答by Mithun ck
If you want a fixed height slider with every slides filling the slider height without leaving any blank space, In style.css add these lines:
如果你想要一个固定高度的滑块，每张幻灯片都填充滑块高度而不留任何空白，在 style.css 中添加这些行：
.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
}
回答by luckakashi
You can use flex-box to organize the slides height:
您可以使用 flex-box 来组织幻灯片的高度：
.slider-slides {
display: flex;
}
Don't forget to reset slides height and all slides will get the biggest height :)
不要忘记重置幻灯片高度，所有幻灯片都将获得最大高度:)
.slider-slide {
height: auto;
}
回答by Abhimanyu Kumar
strong textif you are using ionic 2 than add a scss.
如果您使用 ionic 2，则使用强文本而不是添加 scss。
.slide-zoom {
height: 100%;
}
and import this class in
并导入这个类
<ion-content class=slide-zoom>
<ion-slides>
<ion-slide>
..............
</ion-slide>
<ion-slide>
..............
</ion-slide>
</ion-slides>
</ion-content>
回答by Homa Pourmohammadi
for a more eye-caching design:
更吸引眼球的设计：
set the height of parent box to your desired height (exmp 300px)
将父框的高度设置为您想要的高度（例如 300px）
set the img overflow and min height to cover all height for images shorter than 300px:
设置 img 溢出和最小高度以覆盖小于 300px 的图像的所有高度：
.box img{
overflow: hidden;
min-height: 300px;
}
.slider-slides{
height:300px;
}
回答by Mohamed Arshath
<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);
}
// Timeout for dynamically load data. if your content static skip timeout
// 动态加载数据超时。如果您的内容静态跳过超时
