使用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+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 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中实现进程间通讯
2006/10/09 PHP
PHP操作xml代码
2010/06/17 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
小学生评语大全
2014/04/18 职场文书
物理学专业求职信
2014/07/04 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers