Как добавить динамический контент в заставку ionic 3?

Question

В моем приложении ionic 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 и все внутри него не является обязательным.

Всплеск 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