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>

显示在横向显示时的分割视图和在肖像上的幻灯片，

作为主页，以下是我的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>

但没有任何反应，任何线索为何会发生这种情况？以下笔在操作中显示此行为：Our selectOneMenu wiki page

编辑：发现此行为仅在webbrowsing上，当我在Android设备上打开时，这开始工作

Answer 1

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

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

＆＃13;

<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>

＆＃13;

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

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

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

Answer 2

好的，代码正在运行，但正如我在移动版上所说，这是因为它只能切换1个视图，所以我让2个导航器串联工作：

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

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

    <ons-template id="navigatorPort.html">
        <ons-navigator var="navPort"></ons-navigator>
    </ons-template>
    <ons-template id="navigatorLand.html">
        <ons-navigator var="navLand"></ons-navigator>
    </ons-template>
</div>

然后创建一个函数：

$scope.gotoPage = function (url) {
    navLand.pushPage(url);
    navPort.pushPage(url);
};
$scope.back = function () {
    navLand.popPage();
    navPort.popPage();
};

OnsenUI显示页面

2 个答案: