Question

美好的一天。请问，请用离子2中的菜单组件向我解释一件事。我写了这段代码：

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item (click)="open(profileRoot)">Profile</button>
            <button ion-item (click)="open(farmPage)">Farms</button>
            <button ion-item (click)="open(feedsRoot)">Feeds</button>
            <button ion-item (click)="open(calculatorRoot)">Calculator</button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="calculatorRoot"></ion-nav>

在每个组件中我都有这段代码：

<ion-navbar *navbar>
<ion-buttons start>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content class="calculator-page">
    Profile
</ion-content>

但是，问题是 - 菜单图标出现在iOS上，应该是左侧，但在Android设备上，它出现在右侧。有人可以解释为什么会这样吗？

Answer 1

这是因为Android和Android的CSS不同的iOS。

如果您检查<ion-buttons>，您会看到：

for Android

ion-buttons { order: 4; }

for iOS

ion-buttons { order: 3; }

这是FLEX顺序，用于确定按钮的位置。

如果你想要iOS和iOS上相同的位置Android，你应该写在app.md.scss：

ion-buttons { order: 3; }

Answer 2

Ionic2 Android md主题不包含.ion-button[start]的设置，即使它包含.ion-button[end]的设置。

我发现使用left（和right）属性按预期工作，因此只需将<ion-buttons start>更改为<ion-buttons left>：

<ion-navbar *navbar>
<ion-buttons left>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content class="calculator-page">
    Profile
</ion-content>

我还没有看到何时使用开始/结束与左/右的文档。虽然直接在css中覆盖flex命令将适用于您的特定情况，但可能会导致应用程序其余部分中的按钮出现故障。

离子2中的菜单

2 个答案: