脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ionic 切换页面卡顿

使用ionic切换页面卡顿的解决方法

 更新时间：2016年12月16日 10:16:42   作者：zhengzebinhao  
使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大家采用cordova提供的native transitions可以让页面切换近乎原型的体验，一起通过本文学习下具体实现思路

使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大部分人会使用禁用动画的方法$ionicConfigProvider.views.transition('no');，但并不是最好的解决思路，cordova提供了native transitions可以让页面切换近乎原型的体验。主要步骤如下：

1、npm install ionic-native-transitions --save 下载该文件，并放入www/lib文件夹下

2、在index.html中加入<script src="lib/ionic-native-transitions/dist/ionic-native-transitions.min.js"></script>

2、cordova plugin add cordvoa-plugin-NativePageTransitions安装该插件

3、在app.js中引入'ionic-native-transitions'配置如下信息并禁用$ionicConfigProvider.views.transition('no');

$ionicNativeTransitionsProvider.setDefaultOptions({ 
 duration: 400, // in milliseconds (ms), default 400, 
 slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4 
 iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1 
 androiddelay: -1, // same as above but for Android, default -1 
 winphonedelay: -1, // same as above but for Windows Phone, default -1, 
 fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android) 
 fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android) 
 triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option 
 backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back 
});

这样在打包成的app里，切面切换的效果会比ionic自带的要流畅不少；

注意：页面切换的方向，后退<ion-nav-back-button>默认是左往右，其他则是右往左，有时候你可能并不用<ion-nav-back-button>这个标签，而是使用<ion-nav-bar>该标签，后退加自定义的东西，这时后退是按右往左，那怎样左往右了，用$rootScope.$ionicGoBack();就可以，而不要使用$ionicHistory.goBack();之后的后退方法。

更多的可以看下这个地址

https://github.com/shprink/ionic-native-transitions 

以上所述是小编给大家介绍的使用ionic切换页面卡顿的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js监听键盘事件示例代码

    js监听键盘事件示例代码

    本文为大家详细介绍下使用js如何监听键盘事件，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-07-07
  • js 事件的传播机制(实例讲解)

    js 事件的传播机制(实例讲解)

    下面小编就为大家带来一篇js 事件的传播机制(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript中this详解

    JavaScript中this详解

    都说 JavaScript 是一种很灵活的语言，这其实也可以说它是一个混乱的语言。它把函数式编程和面向对象编程糅合一起，再加上动态语言特性，简直强大无比，下面小编给大家介绍Javascript中this详解，需要的小伙伴可以来参考下
    2015-09-09
  • JavaScript中的原始值和复杂值

    JavaScript中的原始值和复杂值

    这篇文章主要介绍了JavaScript中的原始值和复杂值 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 深入理解jQuery()方法的构建原理

    深入理解jQuery()方法的构建原理

    对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理，有需要的朋友们可以参考借鉴。
    2016-12-12
  • js中几种循环的退出方式实例总结

    js中几种循环的退出方式实例总结

    提到在一段程序中如果碰到需要终止,结束一个循环,函数或者一段代码,一般会想到以下这几个关键字return、continue、break,这篇文章主要给大家介绍了关于js中几种循环的退出方式,需要的朋友可以参考下
    2022-12-12
  • 使用documentElement正确取得当前可见区域的大小

    使用documentElement正确取得当前可见区域的大小

    如何取得当前浏览器里面可见区域的大小？其他方法都不适用，只有documentElement才可以,需要的朋友可以参考下
    2014-07-07
  • 11种JavaScript前端数据去重方式总结

    11种JavaScript前端数据去重方式总结

    这篇文章主要为大家总结了JavaScript去重的11种方式，各有优缺点，文中的示例代码讲解详细，具有一定的学习价值，需要的可以根据需求合理使用
    2023-06-06
  • 微信小程序日历插件代码实例

    微信小程序日历插件代码实例

    这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • thinkphp中常用的系统常量和系统变量

    thinkphp中常用的系统常量和系统变量

    这篇文章主要介绍了thinkphp中常用的系统常量和变量,需要的朋友可以参考下
    2014-03-03

最新评论