温泉多滑菜单

Question

是否可以向 Onsen 移动应用程序添加多个滑动菜单。我需要有左右菜单。我什至想要顶部和底部的滑动菜单，但我认为这是不可能的。

我已经尝试复制并粘贴 2 个菜单，但它不起作用，只有 1 个菜单可以正常工作。

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
     var="menu" type="overlay" max-slide-distance="90%" swipeable="true" swipe-target-width="120px">
    </ons-sliding-menu>


    <ons-template id="menu.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent"></ons-toolbar>

            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New page
                </ons-list-item>

        </ons-page>
    </ons-template>

    <ons-template id="page1.html">
        <ons-page>

            <ons-row style="text-align: center;">
                <ons-col>
                  Welcome
                </ons-col>
            </ons-row>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 2</div>
            </ons-toolbar>


            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
                        Toggle Menu
                    </ons-button>
                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>
</body>

Answer 1

您需要像这样将一个滑动菜单放在另一个滑动菜单中：

<ons-sliding-menu main-page="page.html" menu-page="menu-left.html" side="left" max-slide-distance="85%" swipable="true" var="leftMenu">
</ons-sliding-menu>

<ons-template id="page.html">
  <ons-page>
  <ons-sliding-menu main-page="page1.html" menu-page="menu-right.html" side="right" max-slide-distance="85%" swipable="true" type="reveal" var="rightMenu">
  </ons-sliding-menu>
  </ons-page>
</ons-template>

在这里工作：http://codepen.io/frankdiox/pen/XbEzqq

希望对您有所帮助！

温泉多滑菜单

Onsen Multiple slide menu

cordova

onsen-ui