Ionic 4：ion-select 在 IOS 上效果不佳

Question

启用 IOS 时，ion-select 不会在点击时触发选择。它在点击其边界/边框时会这样做。

错误代码示例：

    <ion-list>
    <ion-item no-padding>
      <ion-label position="floating">{{'GENDER' | translate}}</ion-label>
      <ion-select formControlName="gender">
        <ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
        <ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
      </ion-select>
    </ion-item>
    </ion-list>

我是不是漏掉了什么？

Answer 1

将 tappable 属性添加到 <ion-item>:

<ion-list>
 <ion-item tappable no-padding>
    <ion-label position="floating">{{'GENDER' | translate}}</ion-label>
    <ion-select formControlName="gender">
    <ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
    <ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
    </ion-select>
 </ion-item>
</ion-list>

Answer 2

错误的部分是 label 元素上的 position="floating"。删除它，或放置其他类似 stacked 的东西可以解决问题。

<ion-list>
  <ion-item no-padding>
    <ion-label>{{'GENDER'}}</ion-label>
    <ion-select formControlName="gender">
      <ion-select-option value="male">{{"MALE" }}</ion-select-option>
      <ion-select-option value="female">{{"FEMALE"}}</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

Ionic 4：ion-select 在 IOS 上效果不佳

Ionic 4: ion-select doesn’t work well on IOS

hybrid-mobile-app

ionic-framework

ionic4