1

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

4

2 回答 2

0

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

于 2018-03-22T10:42:24.090 回答
0

您可以尝试使用 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

于 2018-03-22T12:36:02.787 回答