Question

我最近在我的一个PhoneGap移动应用程序中添加了一个滑动菜单，现在所有依赖于myNavigator.ResetToPage（'htmlpage.html'）功能的页面更改都停止了工作。

滑动菜单只包含几个不重要的辅助视图。

这是index.html文件的草图

<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('main.html', {closeMenu: true})">
      Home
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('my_stuff.html', {closeMenu: true})">
      My Stuff
    </ons-list-item>
  </ons-list>
</ons-template>


<ons-template id="main.html">
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page ng-controller="AppController" id="main">
            <ons-tabbar>
                <ons-tab active="true" page="page1.html">
                    <div class="tab">
                        <ons-icon icon="ion-calendar" class="tab-icon"></ons-icon>
                        <div class="tab-label">Page 1</div>
                    </div>
                </ons-tab>
                <ons-tab page="page2.html">
                    <div class="tab">
                        <ons-icon icon="ion-checkmark" class="tab-icon"></ons-icon>
                        <div class="tab-label">Page 2</div>
                    </div>
                </ons-tab>
                <ons-tab page="settings.html">
                    <div class="tab">
                        <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
                        <div class="tab-label">Settings</div>
                    </div>
                </ons-tab>
            </ons-tabbar>
        </ons-page>
    </ons-navigator>
</ons-template>


<ons-template id="settings.html">
    <ons-page id="settings">
        <ons-toolbar style="background-color:#222;">
            <div class="center" style="color: white">Settings</div>
        </ons-toolbar>
        A HELP BUTTON WITH ng-click="navigateHelp()"
        AN ABOUT BUTTON WITH ng-click="navigateAbout()"
    </ons-page>
</ons-template>

滑动菜单和导航器之间是否有任何连接，导致导航器停止工作？

Answer 1

当您使用setMainPage时，您正在更改ons-sliding-menu的内容。 ons-navigator是您更改的内容的一部分，因此如果您使用settings.html加载setMainPage页面，那么您将无法使用导航器（仅在main.html内）。

停止使用menu.setMainPage并始终使用ons-navigator方法。相当于myNavigator.resetToPage(...)：

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('main.html'); menu.close();">
      Home
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('my_stuff.html'); menu.close();">
      My Stuff
    </ons-list-item>
  </ons-list>
</ons-template>

这样您就可以维护菜单内容，即导航器，只更改导航器的内容。

如果将滑动菜单添加到页面Onsen UI，则导航器不起作用

1 个答案: