解决ionic 进入首页短暂黑屏或者白屏问题

        作为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


解决ionic 进入首页短暂黑屏或者白屏问题_第1张图片
解决ionic 进入首页短暂黑屏或者白屏问题_第2张图片

1.2 修改跳转方式


解决ionic 进入首页短暂黑屏或者白屏问题_第3张图片


解决ionic 进入首页短暂黑屏或者白屏问题_第4张图片

1.3 运行结果



2. 覆盖样式(以网页版为例),如果网页不使用动画的话,默认是白屏加载

   未修改前,会有白屏与黑屏(黑屏是使用了懒加载导致的)


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


解决ionic 进入首页短暂黑屏或者白屏问题_第5张图片

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


解决ionic 进入首页短暂黑屏或者白屏问题_第6张图片

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


解决ionic 进入首页短暂黑屏或者白屏问题_第7张图片
解决ionic 进入首页短暂黑屏或者白屏问题_第8张图片
解决ionic 进入首页短暂黑屏或者白屏问题_第9张图片

2.4 修改后




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

你可能感兴趣的:(解决ionic 进入首页短暂黑屏或者白屏问题)