我在 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>
我使用以下 scss 代码在我的 ion-card-content
上应用滚动:
ion-card-content {
max-height: calc(100% - #{50px});
position: relative;
overflow: hidden;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
}
如果我在我的 ion-card 上应用以下 scss 代码,卷轴将无法工作:
ion-card {
max-height: 100%;
}
如果我在我的 ion-card 上应用以下 scss 代码,则滚动可以工作,但 ion-card 的大小仍然相同,并且当我的 ion-list 中没有 ion-item 时,它会占用所有屏幕:
ion-card {
height: 100%;
}
您知道执行滚动并保持根据 ionic 列表大小调整高度的任何方法吗?
最佳答案
我通过在我的 ion-card 上设置以下 css 代码解决了这个问题:
ion-card {
max-height: 100%;
display: flex;
flex-direction: column;
}
我还删除了 ion-card-content 元素,并在 ion-list 上应用以下 css 代码:
ion-list {
overflow: hidden;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
}
关于css - 如何在不设置父级高度的情况下滚动 ionic 卡内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55970136/