使用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 相关文章推荐
jquery实现图片随机排列的方法
May 04 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解tween.js的使用教程
Sep 14 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
js实现简单的轮播图效果
Dec 13 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
PHP 加密解密内部算法
2010/04/22 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python文件选择对话框的操作方法
2019/06/27 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
2014年会演讲稿范文
2014/01/06 职场文书
运动会广播稿50字
2014/01/26 职场文书
开学典礼主持词
2014/03/19 职场文书
报关报检委托书
2014/04/08 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
霸气队列口号
2014/06/18 职场文书
好人好事演讲稿
2014/09/01 职场文书
大学生个人学年总结
2015/02/15 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server