To prevent sliding when the modal screen is displayed when using Slidingmenu

I am creating an app using ons-sliding-menu.
When I haven't logged in yet, I use the modal screen to prompt the user to log in, but when I swipe the screen, the ons-sliding-menu menu screen appears, and the modal screen that I've been trying to get through.
http://ja.onsen.io/reference/ons-sliding-menu.html There is an item called swipeable here, but I don't know how to use it.Can someone teach me?

monaca

2022-09-30 20:47

1 Answers

The ons-sliding-menu has a method called setSwipeable, which can be switched.
Or

<ons-sliding-menu var="app.slidingMenu" (omitted) swipeable="{{enable}}">
</ons-sliding-menu>

You can change the attributes directly like this.

ons.bootstrap()
.controller('main', function($scope){
  $scope.enable=true;
  $scope.toggleSwipeable=function(){
    $scope.enable=!$scope.enable;
    // Switch the slide menu 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>
<bodying-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
          modify="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>
          &nbsp; Page 1
      </ons-list-item>

      <ons-list-item
          modify="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>
          &nbsp; 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-buttonng-click="app.slidingMenu.toggleMenu()"<ons-iconicon="bars">/ons-icon><ons-toolbar-button>
              </div>
              <div class="center">Page1</div>
          </ons-toolbar>

          <div style="text-align:center">
              <h1>Page1</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>

2022-09-30 20:47

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656