Ionic 3: Невозможно прокрутить переполнение списка ионов для устройства iOS, где элементы ионов генерируются в списке ионов с помощью ngFor - PullRequest
Новая
       17

Ionic 3: Невозможно прокрутить переполнение списка ионов для устройства iOS, где элементы ионов генерируются в списке ионов с помощью ngFor

2 голосов
/ 14 мая 2019

Используя ionic v3 для разработки гибридного приложения, у меня есть ion-элементы в списке ионов, сгенерированном с помощью * ngFor.Проблема заключается в устройствах iOS, т. Е. Я не могу прокрутить список ионов, который переполняется в направлении y.Но нет такой проблемы для устройств 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.

Пожалуйста, помогите мне, если у кого-то есть решение этой проблемы.Я работал над этой проблемой три дня.Был бы благодарен за решение.

Извините, если возникла какая-либо ошибка при задании вопроса или с моим английским, поскольку это мой первый вопрос здесь.

Спасибо.

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Вы должны поместить свой список в элемент <ion-content> и удалить свой класс css. Этот компонент будет обрабатывать прокрутку и позволит вам отслеживать события, если вам нужно.

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

0 голосов
/ 17 мая 2019

Решением для меня было обновление моей ионно-угловой версии с 3.9.2 до 3.9.5 в package.json, а затем установка npm.Спасибо.

...