离子滑动后退手势启用

时间:2015-08-04 18:47:38

标签: ionic-framework ionic hybrid-mobile-app swipe-gesture ionic-view

我有以下代码:

个人在info.html

<ion-view view-title="Personal Information" can-swipe-back="true">
  <ion-nav-buttons side="left">
    <button class="button button-icon icon  ion-ios-arrow-left" ng-click="doTheBack()" nav-direction="back"></button>
</ion-nav-buttons>
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

和我的控制器

.controller('PersonalInfoCtrl', function($scope) {
  $scope.doTheBack = function() {
  window.history.back();
};
});

我想通过将can-swipe-back="true"置于<ion-view>标记内来启用我尝试的向后滑动功能,但它根本没用。此外,我已经检查了很多文档以及这个问题How do you "Swipe to go back" in Ionic?但似乎没有为我的应用程序启用滑动功能。

1 个答案:

答案 0 :(得分:2)

我实现它的方式是通过$ ionicNavBarDelegate。 在HTML中:

<ion-view view-title="Personal Information">
  <ion-content on-swipe-right="swipe('right')" class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

在控制器中:

$scope.swipe = function (direction) {
                 if(direction == 'right') 
                   $ionicNavBarDelegate.back();
               }

确保在控制器标头中包含$ ionicNavBarDelegate。

如果这不起作用,请查看http://forum.ionicframework.com/t/any-sample-code-on-how-to-use-swipe-to-go-back/19122/13。由于http://codepen.io/mhartington/pen/RNqpJp证明了RC0,因此默认情况下滑动即可返回。