Question

我正在使用phonegap和onsen ui开发移动应用。

有ons-sliding-menu和ons-split-view可以单独使用。

我的愿望行为是在设备为人像时显示菜单栏按钮，并在移动横向或平板电脑任何方向上显示菜单。

我已将它们组合在一起

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

<ons-split-view var="app.splitView"
                secondary-page="menu.html"
                main-page="main.html"
                main-page-width="70%"
                collapse="portrait">
</ons-split-view>

.... 这用于显示菜单栏按钮和切换菜单

<ons-template id="main.html">
    <ons-navigator>

        <ons-page>
            <ons-toolbar fixed-style>
                <div class="left">
                    <ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                </div>
                <div class="center">xxx</div>
            </ons-toolbar>

但是当我添加splitview时，滑动菜单按钮根本不起作用。

是否有将它们组合在一起的最佳做法？

Answer 1

您可以使用ons-if-orientation指令在拆分视图和滑动菜单之间切换。

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

<div ons-if-orientation="portrait">
  <ons-sliding-menu
    max-slide-distance="200px"
    menu-page="menu.html"
    main-page="main.html">
  </ons-sliding-menu>
</div>

但这种方法存在很大问题。菜单实际上有两个DOM树，主页面有两个DOM树。因此，如果您对DOM进行了一些更改，则必须在两个位置进行更改才能使页面同步。

在这里试试： http://codepen.io/argelius/pen/XJdabG

结合ons-sliding-menu和ons-split-view的最佳实践是什么？

1 个答案: