使用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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
如何用JS实现简单的数据监听
May 06 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
详解php的socket通信
2015/08/11 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
玩转Koa之koa-router原理解析
2018/12/29 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
师德个人剖析材料
2014/02/02 职场文书
工程建设实施方案
2014/03/14 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
关于责任的演讲稿
2014/05/20 职场文书
教师工作决心书
2015/02/04 职场文书
计划生育目标责任书
2015/05/09 职场文书
消防演习感想
2015/08/10 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL