使用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静态的动态
Sep 18 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
js实现登录与注册界面
Nov 01 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
杏林同学录(二)
2006/10/09 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
python远程登录代码
2008/04/29 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python脚本实现格式化css文件
2015/04/08 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
对python调用RPC接口的实例详解
2019/01/03 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python 写一个文件分发小程序
2020/12/05 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
党员入党表决心的话
2014/03/11 职场文书
房屋出售协议书
2014/04/10 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python