为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
WebApp

        作为ionic的使用者,从1版本到现在的最新3.9,感受到ionic在不断的变得更好,特别是1到2版本的跨越可以说是颠覆性的,个人比较喜欢ts的编码风格。


如果是启动前和启动后的白屏问题,建议参考以下简书,我就不重复描述了;

http://www.jianshu.com/p/87efc5e396c3

我想解决的是使用了cordova-plugin-splashscreen插件,进入首页时依然会出现短暂的黑屏或白屏,主要原因是首页也采取了懒加载导致的,如果首页能不使用懒加载尽量就不要使用懒加载吧(方法1)。只是有时候很无奈,项目为了兼容网页端,刷新能够重新回到首页,所以首页也使用了懒加载(方法2),那么该问题就出现了


700

1. 去除首页懒加载,以tabs项目为例

1.1 把tabs 的Module添加到app.module


458

656

700

1.2 修改跳转方式


700


700

1.3 运行结果


700


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

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


700

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


700

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


700

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


700

700

700

2.4 修改后


700



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



作者:No刹那光辉
链接:https://www.jianshu.com/p/66a376f2069a


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消