时间戳

首页 > 解决方案 > 导航栏上的图标无法按预期在 ios 上运行

ionic-framework - 导航栏上的图标无法按预期在 ios 上运行

问题描述

示例android/Browser

在 Android 上运行良好

示例开Ios

也不行

page.html

<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
    <ion-navbar color="ticket-blue-rainbow" >
        <ion-row>
            <ion-title> {{ evento.descricao }}</ion-title>
            <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
            <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
            <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
        </ion-row>
    </ion-navbar>
</ion-header>

页面.scss

 .padding-icon {
    padding-right: 15px;
    font-size: 20px;
  }

标签： ionic-frameworkionic3

解决方案

要克服上述问题，您需要使用以下带有<ion-buttons>标签的选项

<ion-buttons right>
   <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right 
   (click)="likeEvento()"></ion-icon>
</ion-buttons>

它会起作用并在右侧显示您的按钮。

推荐阅读