Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to disable swipe effect of IOS platform in ionic

I'm new to Ionic . I'm creating an phonegap app using ionic blank template. When i swipe from left to right on second page of my app a black screen appears. I don't know from where it comes.I cant go back to previous page.I need to kill the app to solve this issue. Following are code before and after the swipe :

before :

<ion-nav-view nav-view-transition="ios" nav-view-direction="forward" class="view-container disable-user-behavior" nav-swipe="">
<ion-pane class="pane" nav-view="active" style="opacity: 1; box-shadow: rgba(0, 0, 0, 0) 0px 0px 10px; -webkit-transform: translate3d(0%, 0px, 0px);">
<form name="memberInfo" ng-submit="saveMemberInfo(data)" class="ng-pristine ng-valid">
......
</ion-pane>
</ion-nav-view>

after :

<ion-nav-view nav-view-transition="ios" nav-view-direction="back" class="view-container disable-user-behavior" nav-swipe=""><ion-pane class="pane" nav-view="active" style="opacity: 1; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 10px; -webkit-transform: translate3d(0%, 0px, 0px); -webkit-transition: 0ms; transition: 0ms;">
<form name="memberInfo" ng-submit="saveMemberInfo(data)" class="ng-pristine ng-valid">
........
</ion-pane><div class="pane" nav-view="cached" style="opacity: 0.9; -webkit-transform: translate3d(-33%, 0px, 0px); -webkit-transition: 0ms; transition: 0ms;"></div></ion-nav-view>

This issue is only appears in ios.

anybody knows how this issue is coming ?

like image 742
DAN Avatar asked May 04 '15 13:05

DAN


4 Answers

According to the Ionic forum just use the following line of code in the config of your AngularJS module:

$ionicConfigProvider.views.swipeBackEnabled(false);
like image 93
LarsBauer Avatar answered Nov 07 '22 19:11

LarsBauer


In the latest version of ionic you can also disable the swipe to go back feature only for certain views by using can-swipe-back="false" on ion-view.

<ion-view can-swipe-back="false"></ion-view>
like image 37
Ciriac Avatar answered Nov 07 '22 19:11

Ciriac


I wrote below code in app.js file .

angular.module(....)
.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){

    $ionicConfigProvider.views.swipeBackEnabled(false);

.
.
.
.//remaining code in config
}
like image 4
DAN Avatar answered Nov 07 '22 20:11

DAN


In case code above is not working: in the run function you can add:

$ionicPlatform.views.swipeBackEnabled(false);
like image 1
Greg Avatar answered Nov 07 '22 20:11

Greg