Question

我想删除离子滑块内物品的填充物。通过设置背景颜色，我发现它必须来自那里，如图所示：

我想删除绿区。

<ion-content >
  <ion-slides style="background-color: #976914d0" >
  <ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
    <div class="flex-container">
        <br/>
        <h1 class="title-top"> {{channel.name}} </h1>
...

到目前为止我用scss试过了什么：

.ios, .md {

page-home {
    ion-slide { 
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important; 
    }

    .flex-container {
        flex-basis:100% !important;
        overflow: auto;
        height: 100% !important;
        background-color: #3498db;

        //height: 100%;
        //display: flex; /* or inline-flex */
        flex:1;
        //align-content: space-between;
        justify-content: space-around;
        flex-direction: column;
        //flex-grow: 1;
        border: solid 5px #000000 ;
    }

[编辑]我应该提到在flex-container中我可以设置高度：600px;它会产生更大的物品，但它不便携。和身高：100％什么都不做。

Answer 1

在flexbox中，flex-start属性的值应为align-self。

鉴于您当前的配置，请从以下开始：

.flex-container {
    align-self: flex-start;
}

Answer 2

我找到了一些解决方法，但并不完美。它删除了顶部的空间，但我仍然无法设置容器大小可自动调整到窗口...我在离子幻灯片上覆盖了一些配置。我看到另一个嵌套在离子滑动中的类;刷卡滑块。我还没有尝试过所有配置...

    ion-slides {
        height: auto !important;
      }

    .flex-container {
        //height: 100% !important;
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: space-between;
        border: solid 5px #000000 ;

    }

[编辑]终于得到了正确答案，补充道：

.scroll-content {
display: flex;
flex-direction: column;

ion-slides {
    display: flex;
}
}

Answer 3

async function fun() {
    ...
    await $.ajax({
        ...

为我工作。看看Ionic演示源：

https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic

去除离子载玻片上的填充物

3 个答案: