ionic-native-transitions调用原生页面切换实现ionic路由切换,让你的ionic应用比原生的应用更快
第一步:
安装ionic-native-transitions 的cordova插件
$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions
第二步:
打开app.module文件加人以下代码
import { NativePageTransitions} from '@ionic-native/native-page-transitions';
providers:[
NativePageTransitions
]
第三步:
定义原生插件的配置参数 Constants.ts
export const NATIVE_FORWARD : NativeTransitionOptions = {
direction: 'left',// 'left|right|up|down', default 'left' (which is like 'next')
duration: 100,
slowdownfactor: 3,
slidePixels: 20,
iosdelay: 100,
androiddelay: 50,
fixedPixelsTop: 0,
fixedPixelsBottom: 0
}
export const NATIVE_BACK : NativeTransitionOptions =Object.assign({direction:'right'},NATIVE_FORWARD)
第四步:
引用原生插件配置参数,实现原生页面切换
import { NativePageTransitions,NativeTransitionOptions } from '@ionic-native/native-page-transitions';
import {NATIVE_FORWARD,NATIVE_BACK} from './Constants';
/**
* 前进
* @param nav
*/
forward(nav:NavController,state:string,param={}){
this.nativePageTransitions.fade(NATIVE_FORWARD);
nav.push(state,param);
}
/**
*
* @param nav 后退
*/
goBack(nav:NavController){
this.nativePageTransitions.fade(NATIVE_BACK);
//nav.pop({animate:false});
nav.pop();
}