小编pre*_*red的帖子

如何在不设置父级高度的情况下滚动离子卡内容

我在 ionic 4 和 angular 7 中遇到滚动问题。

我有以下结构:

<ion-grid>
    <ion-row>
      <ion-col>
       <ion-card>
        <ion-card-header>
         <!-- some content -->
        </ion-card-header>
        <ion-card-content>
         <ion-list>
          <!-- some ion-item -->
         </ion-list>
        </ion-card-content>
       </ion-card>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>
</ion-grid>
Run Code Online (Sandbox Code Playgroud)

我使用ion-card-content以下 scss 代码在我的上滚动:

ion-card-content {
  max-height: calc(100% - #{50px});
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}
Run Code Online (Sandbox Code Playgroud)

如果我在我的离子卡上应用以下 scss 代码,滚动将不起作用:

ion-card {
  max-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

如果我在我的 ion-card 上应用以下 scss 代码,滚动可以工作,但 ion-card 的大小仍然相同,当我的 ion-list 中没有 ion-item 时,它会占用所有屏幕:

ion-card {
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

你知道有什么方法可以执行滚动并保持根据离子列表大小调整大小的高度吗?

css scroll ionic-framework angular ionic4

2
推荐指数
1
解决办法
4685
查看次数

标签 统计

angular ×1

css ×1

ionic-framework ×1

ionic4 ×1

scroll ×1