如何在 ionic 3 的启动画面中添加动态内容？答案

【问题标题】：How to add dynamic content in splashscreen of ionic 3?如何在 ionic 3 的启动画面中添加动态内容？
【发布时间】：2018-08-31 17:47:46
【问题描述】：

在我的 ionic 3 应用程序中，我想在闪屏中添加动态内容，以便我可以在闪屏中显示我的应用程序的当前版本，我应该怎么做？

【问题讨论】：

标签： ionic-framework ionic3 hybrid-mobile-app dynamic-splash-screen

【解决方案1】：

启动画面是静态图像，您不能在其中添加任何动态值。最简单的方法是在页脚或关于页面中添加应用版本。

【讨论】：

【解决方案2】：

你可以尝试使用 HTML 和 CSS

导航到应用启动时加载的默认页面。在我们的例子中，它位于：/src/pages/home.html

在 home.html 的顶部，就在上面粘贴：

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
  <div class="flb">
    <div class="Aligner-item Aligner-item--top"></div>
    <img src="assets/logo.svg">
    <div class="Aligner-item Aligner-item--bottom"></div>
  </div>
</div>

#custom-overlay div 将覆盖整个屏幕。我们将样式绑定设置为 CSS 显示属性。如果 splash 属性为 true，则将其设置为 flex，否则，将其设置为 none。

.flb 类及其内部的所有内容都是可选的。

Splash CSS：在 home.scss 文件中，粘贴：

#custom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width:100%;
  background-color: #002a3e;
}

.flb {
  background-color: #3ebffb;
  height:100%;
  width:100%;
  animation: pulse 1s linear forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  max-width: 50%;
}
.Aligner-item--top {
  align-self: flex-start;
}
.Aligner-item--bottom {
  align-self: flex-end;
}
#custom-overlay img {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  animation: animation 3100ms linear infinite both;
  animation-delay: 1s;
}

这里的关键要素是#custom-overlay。关联的 CSS 规则集使其覆盖当前页面。其中的任何其他内容都取决于您和您的启动页面的需求。

您可以访问这些链接，了解有关如何在您的项目中使用它的更多信息： https://coursetro.com/posts/code/51/How-to-Make-an-Animated-Ionic-Splash-Page-with-HTML-&-CSS113 https://github.com/Flink91/ionic2-animated-splashscreen92

【讨论】：