在使用Ionic3开发移动端应用时，会遇到Android和iOS显示效果不一致的问题，例如返回按钮样式、页面切换动画、Checkbox样式等。本文介绍了如何通过阅读官方文档，特别是 Ionic 的 Config API，实现全局配置，使应用在不同平台上保持一致的视觉效果。通过在app.module.ts中设定配置，可以统一导航栏样式、Tab位置、图标样式和页面过渡动画，有效解决了Android与iOS显示差异带来的困扰。
更多请移步本人掘金：https://juejin.im/post/6847902222072676360
在使用ionic框架做移动端的时候,你会发现代码一样,但是安卓和IOS显示的会有不同.
比如返回键安卓是 < ,IOS是<back,
比如整个header部分,如果你想加个icon,如果你用的不是nav push 而是modals,然后没有返回的默认icon需要手动加的时候,IOS下icon的位置能调到吐血,因为chrome调试的时候明明已经居中,但到了手机上的时候挡住了手机的电源图标......
比如页面切换的时候,安卓过渡效果各种流畅,IOS就出现header部分先退出了,content部分才退出,肉眼看着非常明显的先后,简直不能忍!
比如你用checkbox的时候,安卓是正方形,IOS变成了圆圈,而且它的padding和margin也不同,让要求一致的用户简直不能忍!
有时候还发现连默认的loading效果也不同......
在这个时候, 我才更深深的明白:用一个框架之前,通读这个框架文档的重要性!
以上问题终极解决方案:https://ionicframework.com/docs/api/config/Config/
如图所示,在app.module.ts里面,你可以设置整个APP完全遵从安卓的显示效果来,管他IOS的什么默认显示! 图中统一了nav push形成的返回键为"go back",统一tab的位置在底部,统一了icon样式全部为IOS风格,页面切换动画效果也是IOS风格.
可是统一为IOS风格后呢,就会有header先退出,然后content再退出的问题!
因为IOS的动画效果有的放在header,有的放在content!
这个时候我们就可以设置页面切换动画全部是安卓风格,只需如下设置,运行后完美解决:
除了这些,你还能将哪些地方也设置成一致?config中往下看,按照文档中的属性进行设置就可以了!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
