作为ionic的使用者,从1版本到现在的最新3.9,感受到ionic在不断的变得更好,特别是1到2版本的跨越可以说是颠覆性的,个人比较喜欢ts的编码风格。
如果是启动前和启动后的白屏问题,建议参考以下简书,我就不重复描述了;
http://www.jianshu.com/p/87efc5e396c3
我想解决的是使用了cordova-plugin-splashscreen插件,进入首页时依然会出现短暂的黑屏或白屏,主要原因是首页也采取了懒加载导致的,如果首页能不使用懒加载尽量就不要使用懒加载吧(方法1)。只是有时候很无奈,项目为了兼容网页端,刷新能够重新回到首页,所以首页也使用了懒加载(方法2),那么该问题就出现了

1. 去除首页懒加载,以tabs项目为例
1.1 把tabs 的Module添加到app.module



1.2 修改跳转方式


1.3 运行结果

2. 覆盖样式(以网页版为例),如果网页不使用动画的话,默认是白屏加载
未修改前,会有白屏与黑屏(黑屏是使用了懒加载导致的)

2.1 在index.html 里加入显示样式,解决加载白屏

2.2 在tabs.html 里 进行覆盖(解决懒加载黑屏)

2.3 共用样式,添加到variables.scss 文件



2.4 修改后

这样只需要添加自己喜欢的样式覆盖即可,如果能使用方法1,建议先考虑
网友评论