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


Posted in Javascript onDecember 16, 2016

使用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切换页面卡顿的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS截取字符串常用方法详细整理
Oct 28 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
Vue简单实现原理详解
May 07 Javascript
js验证账户名是否重复
May 26 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
详解如何较好的使用js
Dec 16 #Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 #Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 #Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 #Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 #Javascript
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php截取视频指定帧为图片
2016/05/16 PHP
javascript读取RSS数据
2007/01/20 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python闭包函数定义与用法分析
2018/07/20 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
擅自离岗检讨书
2014/02/11 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
承诺书模板
2014/08/30 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
分居协议书范本
2014/11/03 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
员工担保书范本
2015/09/22 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang