将项目锚定到 Ionic 菜单的底部答案

【问题标题】：Anchor item to bottom of Ionic menu将项目锚定到 Ionic 菜单的底部
【发布时间】：2015-04-15 13:42:31
【问题描述】：

我有下面的 html 来在 Ionic 中构建一个侧面菜单。我的目标是将菜单中的最后一项“登录”锚定到菜单底部，远离其他项目。在 Ionic 中是否有一种简单的方法可以做到这一点？

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/people">
          <i class="icon ion-ios7-people"></i>
          People
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/places">
          <i class="icon ion-ios7-location"></i>
          Places
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/perks">
          <i class="icon ion-ios7-star"></i>
          Perks
        </ion-item>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

【问题讨论】：

标签： html css ionic-framework

【解决方案1】：

在我正在构建的项目中做同样的事情，并找到了可能对您有所帮助的解决方案。您可以根据需要调整样式。

<ion-side-menu side="right">
    <ion-content>

        <ion-list>
            <ion-item nav-clear menu-close href="#">Item1</ion-item>
            <ion-item nav-clear menu-close href="#">Item2</ion-item>
            <ion-item nav-clear menu-close href="#">Item3</ion-item>
            <ion-item nav-clear menu-close href="#">Item4</ion-item>
        </ion-list>

    </ion-content>

    <ion-footer-bar class="bar-stable">
        <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;">Logout</ion-item>
    </ion-footer-bar>

</ion-side-menu>

【讨论】：

有趣的方法。这适用于已部署的 iOS 和 Android 应用吗？
是的，已经发布到 android 和 ios 并且效果很好
知道如何让它与多个项目一起使用吗？
对于多个项目，将样式“bottom:50px”添加到下一个元素，将“bottom:100px”添加到以下元素，依此类推。使用 vars 可以自动化。
会建议将注销项目切换为<div class="title">Logout</div> 之类的东西，以提高清晰度，但支持答案的方法。 :)

【解决方案2】：

@Louwki 的回答对于 Ionic 1 是正确的，在 Ionic 2 中只有一点不同。

为 Ionic 2 更新（ion-footer-bar 变为 ion-footer）。

<ion-side-menu side="right">
<ion-content>

    <ion-list>
        <ion-item nav-clear menu-close href="#">Item1</ion-item>
        <ion-item nav-clear menu-close href="#">Item2</ion-item>
        <ion-item nav-clear menu-close href="#">Item3</ion-item>
        <ion-item nav-clear menu-close href="#">Item4</ion-item>
    </ion-list>

</ion-content>

<ion-footer class="bar-stable">
    <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;">Logout</ion-item>
</ion-footer>

</ion-side-menu>

【讨论】：

【解决方案3】：

我是这样做的。您不需要添加一些 CSS。

<ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
        <h1 class="title">Title</h1>
    </header>
    <ion-content class="has-header has-footer">
        <ion-list>
            <ion-item nav-clear menu-close ui-sref="home">Home</ion-item>
        </ion-list>
    </ion-content>

    <ion-footer-bar class="bar-stable" ng-click="logout()">
       <div class="title"><i class="icon ion-power"></i> Logout</div>
    </ion-footer-bar>
</ion-side-menu>

【讨论】：