javascript - OnsenUI 显示页面

Question

我的项目有当前设置:

<div ons-if-orientation="landscape">
  <ons-split-view secondary-page="app/views/menu.html" main-page="app/views/main.html" main-page-width="80%" collapse="portrait">
  </ons-split-view>
</div>

<div ons-if-orientation="portrait">
  <ons-sliding-menu max-slide-distance="260px" menu-page="app/views/menu.html" main-page="app/views/main.html" type="push" var="menu">
  </ons-sliding-menu>
</div>

显示横向时显示分割 View ，纵向时显示幻灯片菜单，

作为主页，以下内容位于我的 html 中:

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()" ons-if-orientation="portrait">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Main page</div>
        </ons-toolbar>
        <div style="text-align: center">
            <br>
            <ons-button modifier="light"
                        onclick="myNavigator.pushPage('app/views/buildings/buildings.html', { animation : 'slide' } )">
                Show buildings
            </ons-button>
        </div>
    </ons-page>
</ons-navigator>

但现在我想将其更改为当我单击导航或主页中的按钮时显示实际页面

我尝试执行以下操作:

<ons-button modifier="light" onclick="myNavigator.pushPage('app/views/buildings/buildings.html', { animation : 'slide' } )">
    Show buildings
</ons-button>

但是什么也没发生，有知道为什么会发生这种情况吗？以下笔显示了此行为的实际情况:http://codepen.io/cskiwi/pen/JdzrXE?editors=100

编辑:发现此行为仅在网络浏览中出现，当在我的 Android 设备上打开此行为时，它开始工作

Answer 1

它适用于您的 Android 设备，因为它的方向是纵向，而您的 PC 浏览器是横向的。如果您操纵窗口的尺寸，您会发现它也适用于您的电脑浏览器。

主要问题是您有同一导航器的两个实例。

<div ons-if-orientation="landscape">
  <ons-split-view secondary-page="app/views/menu.html" main-page="app/views/main.html" main-page-width="80%" collapse="portrait">
  </ons-split-view>
</div>

<div ons-if-orientation="portrait">
  <ons-sliding-menu max-slide-distance="260px" menu-page="app/views/menu.html" main-page="app/views/main.html" type="push" var="menu">
  </ons-sliding-menu>
</div>

同一页面 menu.html 已使用相同的导航器创建了两次。当另一个可视化时，两者之一将被隐藏，但它们仍然存在。

最简单的解决方案是创建两个包含不同导航器的不同主页。这意味着您必须调整所有导航模式。

HERE你可以找到一个有效的 CodePen 示例，我创建了另一个主页并重命名了前一个主页。现在有两个主页面，名为 mainL.html 和 mainP.html，分别包含 myNavigatorL 和 myNavigatorP >。 (请注意，我在第一次迭代后没有更改导航模式)。