首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >选路时,离子导航杆按钮

选路时,离子导航杆按钮
EN

Stack Overflow用户
提问于 2015-05-08 03:52:40
回答 2查看 1.6K关注 0票数 3

我有一个带有导航条和左侧菜单的Ionic应用程序。导航条包含一个“汉堡包”按钮,扩展左侧菜单。侧菜单包含链接到应用程序不同内容区域的按钮列表。当从内容菜单中的项目导航时,应用程序的内容区域将被正确更新,汉堡包图标将保留在导航栏中。当从内容区域的按钮导航时,汉堡包图标会从导航条中驱散梨。

下面的代码演示(http://codepen.io/FrizziestFuture/pen/pJgvPN)。这里,页面A上的按钮链接到B页,但导致汉堡包图标消失。侧菜单链接正常工作。

代码语言:javascript
运行
复制
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
</head>

<body ng-app="myApp">
  <ion-side-menus>
    <ion-pane ion-side-menu-content>
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons>
          <button menu-toggle="left" class="button button-icon ion-navicon"></button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
    <ion-side-menu side="left">
      <ion-content>
        <ion-list>
          <ion-item nav-clear menu-close ui-sref="pageA">Page A</ion-item>
          <ion-item nav-clear menu-close ui-sref="pageB">Page B</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>
</body>
<script id="templates/pageA.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page A</h1>
      <button ui-sref="pageB">Go to Page B</button>
    </ion-content>
  </ion-view>
</script>
<script id="templates/pageB.html" type="text/ng-template">
  <ion-view>
    <ion-content>
      <h1>Page B</h1>
    </ion-content>
  </ion-view>
</script>
<script src="myApp.js"></script>
</html>

angular.module("myApp", ["ionic"])
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/pageA");

    $stateProvider
    .state("pageA", {
        url: "/pageA",
        templateUrl: "templates/pageA.html"
    })
    .state("pageB", {
        url: "/pageB",
        templateUrl: "templates/pageB.html"
    });
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-24 05:49:33

天哪。我花了太多的时间去寻找它,所以我不得不在这里分享它更明确的含义。

所有的学分都交给Stefan van de Vooren,以及他在这里提供的链接。

默认情况下,隐藏在子视图上的按钮,菜单切换按钮将只出现在根级侧菜单页上。导航到子视图将隐藏菜单切换按钮。通过将ionSideMenus指令的属性设置为true,可以在子页面上显示它们。 <ion-side-menus enable-menu-with-back-views="true">

资料来源: Stefan van de Vooren:http://ionicframework.com/docs/api/directive/menuToggle/

票数 1
EN

Stack Overflow用户

发布于 2017-06-16 05:31:08

对于Ionic 2和3,代码如下所示

代码语言:javascript
运行
复制
<ion-menu persistent="true">

如果不添加,则离子菜单属性“持久性”默认为false。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30115469

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档