ionic3讨论

ionic-native-transitions调用原生页面切换

2018-04-13  本文已影响46人  薪火设计

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();
    }
上一篇下一篇

猜你喜欢

热点阅读