4

我使用 onsen ui 创建了类似 Flipkart 的滑动菜单。我使用属性 side=left/right 来打开左侧或右侧的菜单，但我需要左右不同的菜单，上面的页面相同。当我使用两个不同的第一个菜单时不起作用。我需要知道如何在左右添加两个不同的菜单。

4

2 回答 2

1

可以通过将其与“ons-split-view”嵌套​​，因为拆分视图也可以充当“左”滑动菜单......

索引.html：

<ons-split-view 
  secondary-page="leftMenu.html" 
  main-page="main.html" 
  main-page-width="70%" 
  collapse="portrait">
</ons-split-view>

<ons-template id="leftMenu.html">
  <ons-page>
    <!-- left menu page's contents -->
  </ons-page>
</ons-template>

主.html：

<ons-sliding-menu 
    var="app.menu" 
    main-page="mainPage.html" 
    menu-page="rightMenu.html" 
    max-slide-distance="200px" 
    type="reveal" 
    side="right">
</ons-sliding-menu>

<ons-template id="mainPage.html">
  <ons-page>
   <p style="text-align: center">
     <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
   </p>
  </ons-page>
</ons-template>

<ons-template id="rightMenu.html">
  <ons-page>
    <!-- right menu page's contents -->
  </ons-page>
</ons-template>
于 2014-09-18T14:29:06.757 回答
1

你必须ons-sliding-menu像这样嵌套两个不同的：

<ons-sliding-menu
        main-page="page"
        menu-page="menu-left.html"
        side="left" ...>
</ons-sliding-menu>

<ons-template id="page">
    <ons-sliding-menu
            main-page="content.html"
            menu-page="menu-right.html"
            side="right" ...>
    </ons-sliding-menu>
</ons-template>

<ons-template id="menu-left.html"> ... </ons-template>
<ons-template id="menu-right.html"> ... </ons-template>
<ons-template id="content.html"> ... </ons-template>

在这里工作：http: //codepen.io/onsen/pen/qHeJx

希望能帮助到你 ：）

答案是从Frans Dios复制的

于 2015-11-22T16:46:04.760 回答