cordova - onsen ui を使用して、同じページの左右に 2 つのスライド メニューを追加できますか

Question

温泉UIを使ってフリップカートのようなスライドメニューを作ってみました。属性 side=left/right を使用して左または右にメニューを開きましたが、同じページで左と右に異なるメニューが必要でした。2 つの異なる最初のメニューを使用すると、機能しません。左右に2つの異なるメニューを追加する方法を知る必要があります。

Answer 1

分割ビューは「左」のスライド メニューとしても機能するため、「ons-split-view」でネストすることで可能です...

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

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