Do not accept actions until you click on the next screen.

I'm sorry, but I'm using the following sample to create an application, but if I hit the button continuously, I'm going to open the page of the button that I hit repeatedly.
How can I not accept actions until I transition to the next page?

monaca

2022-09-30 14:35

1 Answers

I think it's common to deactivate the screen until the screen transition is complete.
I don't think I can use it at this rate, but just for your information.

ons.bootstrap()
.controller('main', function($scope){
  $scope.disable=false;
  $scope.push=function(page){
    $scope.disable=true;
    setTimeout(function(p){
      myNavigator.pushPage(p);
    }, 1500, page);
  }
  $scope.postPush=function(){
    $scope.disable=false;
  }
});

<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-navigator var="myNavigator" page="page1.html"ons-postpush="postPush()">
    </ons-navigator> 
</body>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center"> Navigator</div>
    </ons-toolbar>

    <div style="text-align:center">
      <br>
      <ons-buttonng-click="push('page2.html')"ng-disabled="disable">
        Push Page 2
      </ons-button>
    </div>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Page2</div>
    </ons-toolbar>

    <div style="text-align:center">
      <h1>Page2</h1>
      <ons-button onclick="myNavigator.popPage()">
        Pop Page
      </ons-button>
    </div>
  </ons-page>
</ons-template>

2022-09-30 14:35

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