Question

我刚刚查看了这个问题implement differens sliding menu on different pages onsen-ui

但是旧菜单的“覆盖”存在问题。如下图所示。

我已经为不同的页面实现了不同的菜单，为每个页面指定了不同的名称，但是我无法删除旧的菜单。我应该使用什么功能清除并重新初始化同一菜单？例如，如何使用ons-destroy来解决这个问题还有其他解决方案吗？

初始化特定菜单的代码，在本例中为“index_menu.html”：

<ons-sliding-menu menu-page="menu_usato.html" main-page="home_usato.html" side="left"
    var="menu_usato" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
</ons-sliding-menu>

调用主页面的特定菜单的代码，我可以选择不同的菜单“menu_usato.html”：

<ons-list-item class="menu-item" modifier="chevron" ng-click="menu_usato.setMainPage('home.html', {closeMenu: true})">
    <ons-icon icon="fa-home" fixed-width="true"></ons-icon>
    Home
</ons-list-item>

代码，其中有所有调用不同菜单的页面。

<ons-navigator animation="slide" var="gallery">
    <ons-page>
        <div class="app-page">
            <div class="app-page-menu">
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_land.html');">
                            <img src="images/menu/antipasti.jpg">
                            <p>Land Rover</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_hyundai.html');">
                            <img src="images/menu/primi.jpg">
                            <p>Hyundai</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_mitsubishi.html');">
                            <img src="images/menu/pastefresche.jpg">
                            <p>Mitsubishi</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_ssangyong.html');">
                            <img src="images/menu/secondi.jpg">
                            <p>SsangYong</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_isutzu.html');">
                            <img src="images/menu/insalatamista.jpg">
                            <p>Isutzu</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_greatwall.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>GreatWall</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_usato.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>Usato</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
            </div>

        </div>

    </ons-page>
</ons-navigator>

Answer 1

如果您只想更改菜单，那么setMenuPage就足够了。在你的情况下，我们可以看到2个菜单，然后我猜你不会替换菜单，而是将它们嵌套。为了确保您没有嵌套它们，您需要注意不要执行menu.setMainPage(pageX) pageX其中menu_usato.setMainPage('home.html')有自己的菜单的操作。

目前情况似乎如此 - 您正在进行menu_something，因为它有一个导航器，后来会放入更多页面 - 我猜他们中的大多数都有自己的菜单。然而，不是嵌套菜单然后尝试删除外部菜单，您应该尝试找到一个更简单的解决方案。

您可以采取的三种方法是：

仅使用导航器进行导航 - 基本上，如果您的所有页面都有菜单并且您使用导航器，那么您就是安全的。对我而言，似乎在所有情况下，您希望home_something与gallery一起使用。因此，只需使用index_something页面setMainPage进行所有导航。
请勿使用导航器 - 仅setMenuPage和index.html。与前一个完全相反。您可以在gallery中使用一个滑动菜单而不是导航器（再次称为ng-click="setPage('something')"） - 内容最初可以是列表，当您点击时可以执行类似 $scope.setPage = function (category) { gallery.setMenuPage('menu_' + category + '.html'); gallery.setMainPage('home_' + category + '.html'); };，并定义
```
ng-click
```
如果您不喜欢任何一个选项，那么您应该尝试限制自己不要将带有菜单的页面嵌套到另一个中。

一种简单的方法就是让你的导航器在外面，里面有滑动菜单的页面。基本上一切都可以保持与目前相同，唯一的区别是menu_something中菜单项的gallery.pushPage('home.html')。

只需将其更改为以下任何一种
即可
- gallery.replacePage('home.html')
- gallery.resetToPage('home.html')
- <div id="preloader" class="preload"></div> <div id="formarea"></div>
取决于您想要达到的效果。

如何在Ons-sliding-menu中为不同的页面调用不同的菜单？

1 个答案: