Question

使用ionic v3开发混合应用程序，我在使用* ngFor生成的离子列表中包含离子项。问题出在iOS设备上，即我无法滚动在y方向上溢出的ion-list。但是，对于Android设备而言，没有这样的问题。

下面是HTML代码

<ion-list class="scroll-content">
<ion-item *ngFor="let diaryEvent of diaryEvents">
  <h2>{{ diaryEvent.title || "None" }}</h2>
  <h3>{{ moment(diaryEvent.day).format("YYYY-MM-DD") }}</h3>
  <p>{{ diaryEvent.notes }}</p>
  <p>
    <ion-icon *ngIf="diaryEvent.videoFilePath" name="videocam" (click)="eventPopup($event, diaryEvent)"></ion-icon>
    <ion-icon *ngIf="diaryEvent.audioFilePath" name="mic" (click)="eventPopup($event, diaryEvent)"></ion-icon>
  </p>
  <span (click)="viewDiaryEvent(diaryEvent)">
    <u>View</u>
    <ion-icon name="eye"></ion-icon>
  </span>
  <span (click)="editEvent(diaryEvent)">
    <u>Edit</u>
    <ion-icon name="create" ></ion-icon>
  </span>
</ion-item>

下面是CSS

.scroll-content{
  overflow-y:scroll !important;
  height:88vh;
}

我希望该应用能够流畅滚动，因为它是android设备的默认设置。

如果有人有解决问题的方法，请帮助我。我已经为这个问题工作了三天。感谢获得解决方案。

很抱歉在提问或用英语时出现任何错误，因为这是我在这里的第一个问题。

谢谢。

Answer 1

您应该将列表放入<ion-content>元素中，然后删除css类。该组件将处理滚动，并使您能够根据需要跟踪事件。

https://ionicframework.com/docs/api/content

Answer 2

对我来说有效的解决方案是将package.json中的ionic-angular版本从3.9.2更新为3.9.5，然后进行npm安装。谢谢。

离子3：在使用ngFor

2 个答案: