Ionic 4 滚动在 iOS 上无法正常工作

Question

我有一个适用于 Android 的 Ionic 4 Cordova 移动应用，但在 iOS 上存在一些奇怪的滚动问题。离子内容不滚动（垂直滚动），奇怪的是，当我打开侧边菜单时，滚动再次开始工作，当我关闭侧边菜单时它停止工作。我附上app组件的html。

我也不知道问题出在哪里，因为它在 Ionic 3 上运行良好。

这是应用程序的 app.component.html：

  <ion-header class="menu-header menu-title-ios-adapter">
    <ion-toolbar>
      <ion-title class="title-small">Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="main-menu-bg">
    <ion-list *ngFor="let menuGroup of appMenu; let i = index" class="transparent-bg">
      <ion-list-header *ngIf="menuGroup.name">
        {{menuGroup.name}}
      </ion-list-header>
      <div *ngFor="let p of menuGroup.pages">
        <ion-menu-toggle autoHide="false" class="transparent-bg"
          [ngClass]="isActive(p) ? 'icon-color-3':'icon-color-light'"
          *ngIf="(p.enabled===undefined || p.enabled.value) && ((p.loginRequired && authenticated) || (!p.loginRequired && !authenticated) || (p.loginRequired === undefined))">
          <!-- <ion-item tappable (click)="openPage(p)" class="transparent-bg"> -->
          <ion-item tappable [routerDirection]="'root'" [routerLink]="p.url" class="transparent-bg padding-left-s">
            <icon-wrapper class="slot-icon-padding" customClass="normal" slot="start" [icon]="p.icon" [custom]="p.customIcon"></icon-wrapper>
            <ion-label>
              <span class="text-color-gold">{{p.title}}</span>
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </div>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-router-outlet id="content" main></ion-router-outlet>

这是一个页面的内容：

<ion-content>
  <div class="view-frame" fxLayout="column">
    <div class="scrollbar-y" (swipe)="swipeEvent($event)">
      <ion-list class="list-padding">
        <ion-item *ngFor="let leader of board" class="list-item">
          <!-- item -->
        </ion-item>
      </ion-list>
    </div>
  </div>
</ion-content>

这是有问题的css：

.view-frame {
height: auto;
overflow-y: auto;
overflow-x: hidden;
display: block;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
z-index: 999999999;
}

.scrollbar-y {
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

Answer 1

此问题是由于尝试同时启用滑动和滚动手势造成的。尝试删除滑动或尝试此线程上的建议。 https://github.com/angular/angular/issues/10541 根据实际完成这项工作的人所说，这个问题与角度有关。祝你好运。