Question

将登录屏幕与拆分器菜单分开，可以很好地推送菜单页面，但不推送菜单页面的子页面

使用以下代码在登录屏幕中提供导航器以推动拆分器和加载菜单项按预期工作，但是未使用任何一种导航器推动子页面

<ons-template id="index.html">
<ons-page>
<ons-navigator id="loginNav" page="login.html"></ons-navigator>
</ons-page>
</ons-template>

<ons-template id="login.html">
<ons-page>
<ons-button id="merchants"></ons-button>
<script>
  $("#merchants").on("click", function (a) {
   document.querySelector("#loginNav").pushPage("splitter.html");
  });
</script>
</ons-page>
</ons-template>

<ons-template id="splitter.html">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable >
<ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('dashboard.html')" tappable>
          Dashboard
        </ons-list-item>
        <ons-list-item onclick="fn.load('merchants.html')" tappable>
          Merchants
        </ons-list-item>
        <ons-list-item onclick="fn.load('redemptions.html')" tappable>
          Redemptions
        </ons-list-item>
        <ons-list-item onclick="loginNav.popPage(this)" tappable>
          Logout
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content">
    <ons-navigator id="myNavigator" page="dashboard.html"></ons-navigator>
  </ons-splitter-content>
</ons-splitter>
<script>
window.fn = {};
window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};
window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};
</script>
</ons-page>
</ons-template>

预期行为登录屏幕不带分割线，登录拆分器后，页面是从拆分器菜单加载的，子页面由导航器推送

当前行为登录屏幕不带分割线，登录拆分器后，页面是从拆分器菜单加载的，子页面不是由导航器推送的

温泉Ui导航器Splitter Navigator

0 个答案: