1

我有一个带有离子含量的弹出框。该内容通过 *ngFor 复制,离子内容的最大高度为 400 像素。添加新内容时(来自用户搜索),滚动在 iOS 上无法正常工作。见下文:

我电脑上的 Chrome 和 Safari(正常工作):

在此处输入图像描述

在 iOS 上,它没有正确设置滚动区域,相同的代码。你会看到我尝试滚动查看列表的底部,但每次它都会反弹回来,就好像我在内容的底部一样:

在此处输入图像描述

我也尝试将其放入离子列表中,但我真的不想这样做。它也没有用。

这是 HTML(scrollable 被验证为 true,get-user-location 类只是将最大高度设置为 400px):

<ion-content [scrollY]="scrollable" class="get-user-location">
  <form [formGroup]="form">
    <h5 padding no-margin *ngIf="message">{{ message }}</h5>
    <ion-item>
      <ion-input
        color="primary"
        (keyup.enter)="searchClicked()"
        formControlName="search"
      ></ion-input>
      <ion-button (click)="searchClicked()" fill="clear"
        ><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
      ></ion-button>
    </ion-item>
    <ion-item *ngIf="searchStatus">
      {{ searchStatus }}
    </ion-item>

    <ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
      <ion-item *ngFor="let searchResult of searchResults; let i = index">
        <ion-radio mode="md" value="{{ i }}" margin-end></ion-radio>
        <ion-label>{{ searchResult!.name }}</ion-label>
      </ion-item>

      <ion-item>
        <ion-radio mode="md" value="city" margin-end></ion-radio>
        <ion-label>Default city listed below</ion-label>
      </ion-item>
    </ion-radio-group>
    <ion-item>
      <ion-select
        okText="Okay"
        cancelText="Dismiss"
        formControlName="city"
        (ionChange)="cityChanged($event)"
      >
        <ion-select-option *ngFor="let city of cities" [value]="city.id">
          {{ city.name }}
        </ion-select-option>
      </ion-select>
    </ion-item>

    <ion-button
      *ngIf="showSubmit"
      (click)="dismiss()"
      [disabled]="!form.valid"
      fill="clear"
      class="button-padding-start large"
      margin
      >Submit</ion-button
    >
  </form>
</ion-content>
4

3 回答 3

1

这是一个错误:

https://github.com/ionic-team/ionic/issues/16910

删除 ion-content 并将其添加到组件的 scss 中:

.backdrop-no-scroll ion-content {
  --overflow: hidden;
}
于 2019-04-15T12:50:03.307 回答
0

尝试

<ion-content no-bounce has-bouncing="false">
...
</ion-content> 
于 2019-04-14T08:41:12.183 回答
0

我发现如果它是 iOS 上的离子错误,有多种方法可以“解决”这个问题。


推荐首先
在列表末尾添加几个空的 ion-item,属性为 lines="none"
( <ion-item lines="none"></ion-item>)

我不推荐第二
设置no-bounce has-bouncing="false"为离子含量

我不推荐第三
去掉ion内容并添加到CSS文件中
.backdrop-no-scroll ion-content { --overflow: hidden; }

于 2020-07-28T08:27:12.397 回答