1

すみません、以下のサンプルを使ってアプリを作成しているのですが、ボタンを連打すると何回も連打したボタンのページを開きに行ってしまいます。
次のページに遷移するまでアクションを受け付けないようにするにはどうすれば良かったでしょうか?

1 件の回答 1

1

押したら画面遷移が完了するまで非活性にする方法等が一般的かなと思います。
このままだと使えないと思いますが、参考程度に。

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>

<body ng-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-button ng-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">Page 2</div>
    </ons-toolbar>

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

              

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。