我有一个带有离子含量的弹出框。该内容通过 *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>