Question

我试图将meteor ionic lib（https://github.com/meteoric/meteor-ionic）用于我的应用程序。我想出了如何添加左侧菜单。但每当我导航到另一个页面时，左上方的导航按钮和中心标题就会消失。这些按钮仅出现在索引页面的新负载中。如果我从浏览器的边缘完全拖动，我可以拉出菜单。甲

这是html：

<template name="layout">
  {{#ionBody}}
    {{#ionSideMenuContainer}}
      {{#ionSideMenus}}
        {{#ionSideMenu}}
          <div class="bar bar-header bar-dark">
            <h1 class="title">Menu</h1>
          </div>
          <div class="content has-header">
            <div class="list">
              {{> sideNavItems}}
              <div class="item item-icon-right" data-ion-menu-close>
                Close Me {{> ionIcon icon="ios-arrow-right"}}
              </div>
            </div>
          </div>
        {{/ionSideMenu}}
      {{/ionSideMenus}}

      {{#ionSideMenuContent}}
        {{#contentFor "headerButtonLeft"}}
          <button class="button button-clear pull-left" data-ion-menu-toggle="left">
            {{> ionIcon icon='navicon'}}
          </button>
        {{/contentFor}}
        {{#contentFor "headerTitle"}}
          <h1 class="title">MyApp</h1>
        {{/contentFor}}
        {{> ionNavBar class="bar-positive"}}
        {{#ionNavView}}
          {{> yield}}
        {{/ionNavView}}
      {{/ionSideMenuContent}}
    {{/ionSideMenuContainer}}
  {{/ionBody}}
</template>

<template name="sideNavItems">
  <div class="item item-icon-right" data-ion-menu-close>
    <a href="{{ pathFor 'page1'}}">Page1</a>
  </div>
  <div class="item item-icon-right" data-ion-menu-close>
    <a href="{{ pathFor 'page2'}}">Page2</a>
  </div>
</template>

<template name="page1">
  {{#ionContent}}
    <p>Page1</p>
  {{/ionContent}}
</template>

Answer 1

根据Meteoric ionNavBar“headerButtonLeft”，“headerTitle”和“headerButtonRight”是ionNavBar的组成部分。

我建议你在创建ionNavBar之后通过为每个模板设置这些组件来设置它们：

<template name="page1">
  {{#contentFor "headerButtonLeft"}}
    <button class="button button-clear pull-left" data-ion-menu-toggle="left">
      {{> ionIcon icon='navicon'}}
    </button>
  {{/contentFor}}
  {{#contentFor "headerTitle"}}
    <h1 class="title">MyApp</h1>
  {{/contentFor}}

  {{#ionView}}
    <p>Page1</p>
  {{/ionView}}
</template>

Meteor-Ionic：Sidemenu按钮在点击时消失

1 个答案: