ionic页面间跳转的动画实现

1. 在<ion-view>标签中加入:

nav-direction="back"或nav-direction="forward"

2.用$state.go()实现页面间的跳转的动画:

在$state.go()后面加上 $ionicViewSwitcher.nextDirection("back")或 $ionicViewSwitcher.nextDirection("forwoard")
可以实现跟加nav-direction一样的效果了,要注入ionicViewSwitcher服务

3.点击手机返回按键实现跳转的:

$ionicPlatform.registerBackButtonAction(function (e) {
        if($state.current.name == 'tab.news' || $state.current.name == 'tab.message' || $state.current.name == 'tab.work' || $state.current.name == 'tab.mine' || $state.current.name == 'login'){
               window.plugins.appMinimize.minimize();
        }else if($ionicHistory.backView()){
               $ionicHistory.goBack();
               $ionicViewSwitcher.nextDirection("back");
        }
        else{
            window.plugins.appMinimize.minimize(); 
        }
        e.preventDefault();
        return false;    
    }, 101);

 

posted @ 2017-10-13 17:04  三石!  阅读(2366)  评论(0编辑  收藏  举报