【问题标题】:Ionic 3: Cannot scroll ion-list overflow-y for an iOS-device where ion-items are generated inside ion-list using ngForIonic 3:对于使用 ngFor 在 ion-list 中生成 ion-items 的 iOS 设备,无法滚动 ion-list overflow-y
【发布时间】:2019-10-01 15:55:50
【问题描述】:

使用 ionic v3 开发混合应用程序,我在使用 *ngFor 生成的 ion-list 中有 ion-items。问题出在 iOS 设备上,即我无法滚动在 y 方向上溢出的 ion-list。但安卓设备没有这样的问题。

下面是 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 设备的默认设置。

如果有人有解决问题的方法,请帮助我。我已经为这个问题努力了三天。将不胜感激获得解决方案。

抱歉,如果在提问方式或我的英语方面有任何错误,因为这是我在这里的第一个问题。

谢谢。

【问题讨论】:

  • 使用 Vue v-for 的同样问题 :(

标签: ios css ionic-framework scroll ionic3


【解决方案1】:

您应该将您的列表放入 &lt;ion-content&gt; 元素并删除您的 css 类。该组件将处理滚动,并让您能够在需要时跟踪事件。

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

【讨论】:

  • 这是我的问题的解决方案。它使 ios 上的滚动非常好
  • 感谢您的回复。已经找到解决方案了。也会尝试您的解决方案。
【解决方案2】:

对我有用的解决方案是将我的 ionic-angular 版本从 package.json 中的 3.9.2 更新到 3.9.5,然后 npm install。 谢谢。

【讨论】:

    猜你喜欢
    • 2018-04-02
    • 2018-04-28
    • 2018-05-04
    • 2018-09-25
    • 1970-01-01
    • 1970-01-01
    • 2019-12-24
    • 2016-04-18
    • 2018-10-15
    相关资源
    最近更新 更多