如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡？

Question

就像这个问题一样，我需要使离子卡可滚动，并固定离子卡标头，就像离子标头和离子内容发生的情况一样。

我为我的页面放置了这个CSS代码：

ion-card{
        height: 80%;
        width: 100%;
        overflow: scroll;

        ion-card-header{
            margin-bottom: 10px;
        }

我的离子卡现在可以滚动，但离子卡标题也可以滚动，我希望当我向下滚动时它固定在卡的顶部。

我还尝试添加 ion-card-header css 块“位置：固定”或“位置：粘性”，但没有任何变化。

我在互联网上找不到任何解决方案，有人可以帮忙吗？

Answer 1

如果我正确理解你的问题，你想要一张带有固定标题和滚动内容的卡片。

您的 CSS 不会发生这种情况，因为您将

overflow: scrollable

应用于整个

ion-card

元素。你需要将它们分开。

所以你最终应该得到类似的东西（重构你认为最好的）：

ion-card {
   height: 80%;
   width: 100%;
}

ion-card > ion-card-content {
   height: 150px; //your height of content here
   overflow: scroll;
}

您不需要将固定属性应用于标头，因为默认情况下它应该保持固定。

Answer 2

You can user virtual scroll inside the card content 

   

 

   <ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>

    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
  </ion-card-content>
</ion-card>