Question

我试图为每个不同的页面onsen-ui加载不同的滑动菜单，但我还没有找到如何做到这一点，现在我有以下内容：

//Initializing sliding-menu
<ons-sliding-menu 
    menu-page="menuCalendario.html" 
    main-page="calendarioGeneral.html" 
    side="left" var="menu" 
    type="reveal" 
    max-slide-distance="260px" 
    swipeable="true"
    id="ons_sliding_menu"
>
</ons-sliding-menu>


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

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">
                <ons-icon icon="circle"></ons-icon>
                Vista General
            </ons-list-item>
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioDetallado.html', {closeMenu: true})">
                <ons-icon icon="ion-funnel"></ons-icon>
                Vista detallada
            </ons-list-item>
        </ons-list>

        <ul class="list-group">
            <li class="list-group-item" onclick="popupPrendaCalendario()">
                <img src="http://www.mafepe.com/admin/resources/productos/fotos/211/Camisa-Prendas-Atemporales-Aneto-CAMCP.jpg" class="img-prenda-list">
                <div>
                    Camisa verde de cuadros Big jhon                
                </div>
            </li>
        </ul>

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


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

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-plus"></ons-icon>
                Editar perfil
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>



//page 1
<ons-template id="calendarioGeneral.html">
    <ons-page id="foobar_calendarioGeneral">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Calendario general !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('usuarioPerfil.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>


//page 2
<ons-template id="usuarioPerfil.html">
    <ons-page id="foobar_usuarioPerfil">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Usuario perfil !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>

我需要在calendarioGeneral.html（页面1）打开时加载menuCalendario.html（菜单1），当usuarioPerfil.html（页面2）打开时，加载menuPerfilUsuario.html（菜单2）

感谢您的帮助。

Answer 1

当您更改为其他页面时，请使用menu.setMenuPage(pageUrl, [options])。在文档中解释：http://onsen.io/reference/ons-sliding-menu.html#method-setMenuPage

在onsen-ui的不同页面上实现不同的滑动菜单

1 个答案: