Question

在我的离子3应用程序中，我想在启动画面中添加动态内容，以便我可以在启动画面中显示我的应用程序的当前版本，我该怎么办？

Answer 1

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

Answer 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

如何在离子3的闪屏中添加动态内容？

2 个答案: