ons-navigatorを使用してページ制御をしている際のons-sliding-menuの挙動について

投稿者: Anonymous

初めまして、よろしくお願い致します。
ons-navigatorを使用してページ制御しています。

htmlページを分けないで、ons-templateを使用して、
ons-sliding-menuでスライドメニュー表示をさせています。
その際、スライドメニュー中から、
リンクをクリックすると、別のページに遷移させており、
(コードだと、a.htmlに遷移する)
その後スライドメニューを自動で閉じる動きをさせたいのですが、
うまくいきません。

myNavigator.pushPage(‘a.html’, {closeMenu: true})”

app.slidingMenu.setMainPage(‘a.html’, {closeMenu: true})”
に書き換えるなどしたのですが、
ons-navigatorでページ制御を行っているせいか、
エラーとなり、ページ遷移後にメニューが表示されたままになってしまいます。
どなたかお知恵をお貸しください。
何卒よろしくお願い致します。

_x000D_

_x000D_

<ons-sliding-menu var="app.slidingMenu" menu-page="s-menu.html" main-page="login.html" side="right" type="overlay" max-slide-distance="200px" swipeable="false">_x000D_
<ons-navigator var="myNavigator" page="login.html"></ons-navigator> _x000D_
</ons-sliding-menu>_x000D_
_x000D_
<ons-template id="s-menu.html">_x000D_
<ons-page modifier="menu-page" style="background-color: white">_x000D_
_x000D_
    <ons-page modifier="menu-page">_x000D_
        <ons-toolbar modifier="transparent">_x000D_
          <div class="right">_x000D_
            <ons-toolbar-button class="menu-close" ng-click="app.slidingMenu.close()">_x000D_
              </ons-icon>Close_x000D_
            </ons-toolbar-button>_x000D_
          </div>_x000D_
    </ons-toolbar>_x000D_
_x000D_
    <ons-list>_x000D_
    _x000D_
        <ons-list-item>_x000D_
            メニュー_x000D_
        </ons-list-item>_x000D_
_x000D_
        <ons-list-item_x000D_
            modifier="tappable" class="list__item__line-height"_x000D_
            onclick="myNavigator.pushPage('a.html', {closeMenu: true})">_x000D_
            &nbsp; ページa_x000D_
        </ons-list-item>_x000D_
_x000D_
    </ons-list>_x000D_
</ons-page>_x000D_
</ons-template>

_x000D_

_x000D_

_x000D_

解決

myNavigator.pushPage(‘a.html’, {closeMenu: true})”

ons-navigatorcloseMenuというオプションは無いので、ここで指定しても上手く動かないと思います。
ons-sliding-menucloseMenu([options])というメソッドがあるので、pushPageと一緒に呼んであげると閉じます。
閉じるタイミングを調整したいのであれば、ons-navigatorのイベントを使用すると良い感じにできるかもしれません。

  • prepush : pageがpushされる直前に発火されます。
  • prepop : pageがpopされる直前に発火されます。
  • postpush : pageがpushされてアニメーションが終了してから発火されます。
  • postpop : pageがpopされてアニメーションが終わった後に発火されます。

詳細はOnsen UI Guideをご参照ください。

以下、サンプル

_x000D_

_x000D_

ons.bootstrap();

_x000D_

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsenui.css" rel="stylesheet"/>_x000D_
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsen-css-components.css" rel="stylesheet"/>_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/angular/angular.min.js"></script>_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/onsenui.min.js"></script>_x000D_
_x000D_
<ons-sliding-menu var="app.slidingMenu" menu-page="s-menu.html" side="right" type="overlay" max-slide-distance="200px" swipeable="false">_x000D_
  <ons-navigator var="myNavigator" page="login.html"></ons-navigator>_x000D_
</ons-sliding-menu>_x000D_
_x000D_
<ons-template id="s-menu.html">_x000D_
  <ons-list>_x000D_
    <ons-list-item>_x000D_
      メニュー_x000D_
    </ons-list-item>_x000D_
    <ons-list-item modifier="tappable" class="list__item__line-height"_x000D_
                   onclick="myNavigator.pushPage('a.html'), app.slidingMenu.closeMenu()">_x000D_
      &nbsp; ページa_x000D_
    </ons-list-item>_x000D_
  </ons-list>_x000D_
</ons-template>_x000D_
_x000D_
<ons-template id="login.html">_x000D_
  <ons-toolbar>_x000D_
    <div class="right">_x000D_
      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">_x000D_
        <ons-icon icon="bars"></ons-icon>_x000D_
      </ons-toolbar-button>_x000D_
    </div>_x000D_
    <div class="center">Login</div>_x000D_
  </ons-toolbar>_x000D_
_x000D_
  <p style="padding-top: 100px; color: #999; text-align: center">Login Page Contents</p>_x000D_
</ons-template>_x000D_
_x000D_
<ons-template id="a.html">_x000D_
  <ons-toolbar>_x000D_
    <div class="left">_x000D_
      <ons-back-button>Back</ons-back-button>_x000D_
    </div>_x000D_
    <div class="center">A</div>_x000D_
    <div class="right">_x000D_
      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">_x000D_
        <ons-icon icon="bars"></ons-icon>_x000D_
      </ons-toolbar-button>_x000D_
    </div>_x000D_
  </ons-toolbar>_x000D_
_x000D_
  <p style="padding-top: 100px; color: #999; text-align: center">A Page Contents</p>_x000D_
</ons-template>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *