ons-sliding-menuを使用してアプリを作っています。
未ログイン時にはmodal画面を表示させ、ログインを促す使用にしているのですが、画面をスワイプさせると、ons-sliding-menuのメニュー画面が表示されてしまい、せっかくのmodal画面がスルーされてしまいます。
http://ja.onsen.io/reference/ons-sliding-menu.html ここを見たところswipeableという項目があるのですが、どう使えばいいかわかりません。どなたかご教授お願いします。
1 件の回答
ons-sliding-menu
にsetSwipeableというメソッドがあるので、これを利用してあげれば切り替えられます。
もしくは
<ons-sliding-menu var="app.slidingMenu"(中略)swipeable="{{enable}}">
</ons-sliding-menu>
こんな感じに直接属性を変更することも可能です。
ons.bootstrap()
.controller('main', function($scope) {
$scope.enable = true;
$scope.toggleSwipeable = function() {
$scope.enable = !$scope.enable;
// スライドメニューの swipeable を切り替える
app.slidingMenu.setSwipeable($scope.enable);
};
});
<head>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
</head>
<body ng-controller="main">
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</body>
<ons-template id="menu.html">
<ons-page style="background-color: white">
<ons-list>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})">
<i class="fa fa-home fa-lg" style="color: #666"></i>
Page 1
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true})">
<i class="fa fa-gear fa-lg" style="color: #666"></i>
Page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-navigator>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 1</h1>
<ons-button
ng-click="app.slidingMenu.toggleMenu()">
Toggle Menu
</ons-button>
<div style="margin-top:5px">
<ons-button
ng-click="toggleSwipeable()">
Toggle Swipeable
</ons-button>
<span>Swipeable:{{enable}}</span>
</div>
<p> Click "Toggle Menu" to close/open menu, </p>
<p> You can also swipe the page left/right. </p>
<img src="images/ico_swipe_right_s.png" alt="">
</div>
</ons-page>
</ons-navigator>
<ons-template>