如何使单个离子卡项目列表可滚动

Question

我已经搜索了几个小时，寻找一种方法可以使单个离子卡在包含多张卡片的页面上滚动。似乎 ion-scroll 元素已被弃用，none 的在线教程正在运行。

        <ion-card style="height:150px;" scroll-y="true"  class="groupList">

                <ion-card-header>
                 <!-- some content -->
                </ion-card-header>
                <ion-card-content>
                 <ion-list *ngFor="let group of myGroups">
                    <ion-item>
                        <!-- <ion-avatar slot="start">
                            <img [src]="group.photoUrl"/>    
                        <!-- </ion-avatar>  -->
                        <ion-label>
                            <h2>{{group.groupName}}</h2>
                        </ion-label>
                      </ion-item>
                 </ion-list>
                </ion-card-content>
        </ion-card>

这只是一个具有最大高度的简单列表...我只是想让单个卡片可滚动。
谢谢

Answer 1

只需在您的群组列表中使用 overflow: scroll class:

在您的 page.scss 文件中：

.groupList {
    overflow: scroll;
}

如何使单个离子卡项目列表可滚动

How to make a single ion-card item list scrollable

html

css

angular

ionic4