Question

我有一个onsenui滑动菜单。当我单击其中一个菜单选项（电子设备）时，它将从第1页开始第1页。我使用导航器推送方法导航到第2页。在第2页中，我看到了滑动菜单，但是当我点击时没有任何反应或滑动滑动菜单。但是，当我导航回第1页时，它可以工作。

    <!doctype html>
    <html lang="en" ng-app="myApp">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/onsenui.css">

    <link rel="stylesheet" href="./css/onsen-css-components.css">
    <script src="./js/angular/angular.js"></script>
    <script src="./js/onsenui.js"></script>
    <script src="./js/main.js"></script>
    <link rel="stylesheet" href="./css/index.css">

    </head>
    <body>

    <ons-navigator var="myNavigator">
    <ons-page>
    <ons-sliding-menu main-page="main.html" menu-page="menu.html" var="menu" swipeable=true max-slide-distance="200px">
    </ons-sliding-menu>
    </ons-page>
    </ons-navigator>  

    <ons-template id="main.html">
    <ons-page>
    <ons-toolbar>
    <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">Navigator - Main Page</div>
    </ons-toolbar>

    <div style="text-align: center">
    <br>
    <ons-button modifier="light"
      ng-click="myNavigator.pushPage('page1.html', {hoge: 'hoge'})">
      Push Page 1
    </ons-button>
    </div>
    </ons-page>
    </ons-template>

    <ons-template id="menu.html">
    <ons-page>
    <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('main.html', {closeMenu: true})">Clothes</ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">Electronics</ons-list-item>
    </ons-list>
    </ons-page>
    </ons-template>

    <ons-template id="page1.html">
    <ons-page>
    <ons-toolbar>
    <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Page 1</div>
    </ons-toolbar>

    <div style="text-align: center">
    <h1>Page 1</h1>
    <ons-button modifier="light"
      ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
      Push Page
      </ons-button>

    <ons-button modifier="light"
      ng-click="myNavigator.popPage()">
      Pop Page
    </ons-button>
    </div>
    </ons-page>
    </ons-template>

    <ons-template id="page2.html">
    <ons-page>
    <ons-toolbar>
    <div class="left">
    <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Page 2</div>
    </ons-toolbar>

    <div style="text-align: center">
    <h1>Page 2</h1>
    <ons-button modifier="light"
      ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
      Push Page
      </ons-button>

    <ons-button modifier="light"
      ng-click="myNavigator.popPage()">
      Pop Page
    </ons-button>
    </div>
    </ons-page>
    </ons-template>
    </body>

Answer 1

您的代码中的父元素是ons-navigator，并且您有一个sliding-menu作为其直接子元素。您可以将导航器视为每次推或弹出页面时更改其内容的框架。因此，使用其默认内容滑动菜单，您可以正常使用它。实际上，这个滑动菜单是另一个包含main.html的框架。问题在于，当您按下“第2页”时，您正在使用导航器的方法来更改所有内容，包括该滑动菜单。

您可以反转导航器和滑动菜单的顺序，因此当您更改导航器的内容时，滑动菜单将保留为外框。

希望它有所帮助。

onsenui使用myNavigator.pushPage（）方法

1 个答案: