成人免费网站黄色电影一级片_欧美成人在线播放亚洲_日产一区二区三区无码不卡视频_欧美精品_99爱这里只有精品

讓ionic應(yīng)用實(shí)現(xiàn)類(lèi)原生app的平滑過(guò)渡

日期：2017-02-04 16:52:00     閱讀：446     文章來(lái)源：源美網(wǎng)絡(luò)     標(biāo)籤：深圳網(wǎng)站建設(shè),深圳網(wǎng)站設(shè)計(jì)

讓ionic應(yīng)用實(shí)現(xiàn)類(lèi)原生app的平滑過(guò)渡

該插件可以使ionic開(kāi)發(fā)的app，頁(yè)面之間的切換(huàn)實(shí)現(xiàn)類(lèi)似原生app的平滑過(guò)渡，並且可以選擇滑動(dòng)的形式，速度非常快。同時(shí)支持Android和IOS。

ionic.gif


插件安裝：

# 使用Cordova

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

# 使用Ionic CLI

ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5


ios9下有時(shí)可能出現(xiàn)閃爍等異常，安裝以下插件解決該問(wèn)題：

# 使用Cordova

cordova plugin add cordova-plugin-wkwebview

# 使用Ionic CLI

ionic plugin add cordova-plugin-wkwebview


andorid下如果使用了Crosswalk，且版本大於1.3，需要在config.xml中添加以下內(nèi)容：

<preference name="CrosswalkAnimatable" value="true" />


配置

首先注入該插件：

angular.module('yourApp', [

    'ionic-native-transitions'

]);

默認(rèn)配置方式：

.config(function($ionicNativeTransitionsProvider){

    $ionicNativeTransitionsProvider.setDefaultOptions({

        type: 'slide', 

        direction: 'left', //left right top up ，四參數(shù)可選

        duration: 400, //延時(shí)時(shí)間，單位毫秒，默認(rèn)400ms

        slowdownfactor: 4, //重疊銜接效果，1不使用，默認(rèn) 4

        iosdelay: -1, // ios系統(tǒng)的webview延遲,默認(rèn) -1

        androiddelay: -1, // android系統(tǒng)的webview延遲，默認(rèn) -1

        winphonedelay: -1, // 同上，針對(duì)windowphone，默認(rèn) -1,

        fixedPixelsTop: 0, // 頂部固定像素數(shù), 默認(rèn) 0 (iOS and Android)

        fixedPixelsBottom: 0, // 底部固定像素數(shù), 默認(rèn) 0 (iOS and Android)

        triggerTransitionEvent: '$ionicView.afterEnter', 

        backInOppositeDirection: false 

    });

});

默認(rèn)配置完成後針對(duì)所有路由UI頁(yè)面生效。


如果需要單獨(dú)定義某個(gè)路由的效果：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    }

    templateUrl: "templates/home.html"

})

也可以自行配置針對(duì)各種作業(yè)系統(tǒng)的滑動(dòng)效果。

.state('home', {

    url: '/home',

    nativeTransitionsAndroid: {

        "type": "flip",

        "direction": "right"

    },

    nativeTransitionsIOS: {

        "type": "flip",

        "direction": "left"

    },

    nativeTransitionsWindowsPhone: {

        "type": "flip",

        "direction": "down"

    },

    nativeTransitionsBackAndroid: {

        "type": "flip",

        "direction": "left"

    },

    nativeTransitionsBackIOS: {

        "type": "flip",

        "direction": "right"

    },

    nativeTransitionsBackWindowsPhone: {

        "type": "flip",

        "direction": "up"

    },

    templateUrl: "templates/home.html"

})

針對(duì)一種設(shè)備進(jìn)行設(shè)置(以下將僅改變安卓下的效果，其他設(shè)備繼承setDefaultOptions設(shè)置的效果)：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    },

    nativeTransitionsAndroid: {

        "type": "flip",

        "direction": "right"

    }

    templateUrl: "templates/home.html"

})

在某個(gè)路由中禁用本插件，比如tab上的一個(gè)按鈕：

.state('home', {

    url: '/home',

    nativeTransitions: null,

    templateUrl: "templates/home.html"

})

該插件更詳細(xì)介紹參看github項(xiàng)目地址https://github.com/shprink/ionic-native-transitions



文章引用：http://www.szymweb.com/new/204.html

本站文章為深圳網(wǎng)站建設(shè)·源美網(wǎng)絡(luò)原創(chuàng)策劃(huà)，如有版權(quán)糾紛或者違規(guī)問(wèn)題，請聯(lián)繫我們刪除，謝謝！

最新案例
OUR ADVANTAGE WORKS

售後保障

承諾任何問(wèn)題1小時(shí)內(nèi)解決

數(shù)據(jù)備份

更安全、更高效、更穩(wěn)定

價(jià)格公道精準(zhǔn)

項(xiàng)目經(jīng)理精準(zhǔn)報(bào)價(jià)不弄虛作假

合作無(wú)風(fēng)險(xiǎn)

重合同講信譽(yù)，無(wú)效全額退款