Javascript 离子2的菜单

你好。 你能给我解释一下离子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>

菜单
轮廓
农场
喂养
计算器

在每个组件中，我都有以下代码：

<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设备上它显示在右侧。

---

有人能解释一下为什么会这样吗

这是因为css对于Android和iOS是不同的

如果检查

，您将看到：

• 对于Android

离子按钮{
顺序：4；
}

• 对于iOS

离子按钮{
顺序：3；
}

这是弹性顺序，用于确定按钮的位置

如果你想在iOS和Android上获得相同的位置，你应该在你的

app.md.scss

：

离子按钮{
顺序：3；
}

Ionic2 Android md主题不包括

.ion按钮[start]

的设置，即使它包括

.ion按钮[end]

的设置

我发现使用

left

（和

right

）属性可以按预期工作，所以只需将

更改为

：

轮廓
轮廓

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