背景圖像隨着 iOS [Ionic 5] 上的用戶交互而閃爍

Question

我正在嘗試讓背景圖像在我正在從 Ionic 3 更新到 5 的多頁 Ionic 應用程序上工作。我在 iOS 上遇到了閃爍的背景圖像問題，對於加載的第一頁以外的任何頁面。 我嘗試實現這個解決方案： How to put image in both <ion-header> and <ion-content> in Ionic並且它在 web 瀏覽器中工作，但是當我在 Xcode 的模擬器中運行它時，ionViewWillEnter 在 Z2044BDF6085992021111 中沒有觸發將在瀏覽器中觸發（實時重新加載）。

這是 CSS 中的舊代碼，它在 iOS 中產生閃爍：

ion-content {
    --background: url(/assets/imgs/bg/piano.jpg) no-repeat center/ cover fixed;
    }

解決方法如下所示：

import { DomController } from '@ionic/angular';

...

constructor(public navCtrl: NavController, private domCtrl: DomController) {
  }

...

private initializeBackground(): void {
    try {
      console.log ('initializing background');
      const content = document.querySelector('#level');
      const innerScroll = content.shadowRoot.querySelector('.inner-scroll');
      this.domCtrl.write(() => {
        innerScroll.setAttribute(
          'style',
          'background: url("/assets/imgs/bg/piano.jpg") no-repeat center center / cover'
        );
        });
        console.log('background initialized'); } catch (e) {}
        console.log('background not initialized');
  }

...

ionViewWillEnter() {
    console.log('After Init?');
    this.initializeBackground();   
  }

當我運行它時， ionViewWillEnter 在 web 瀏覽器中運行時會觸發，但是當我在模擬器中運行它時，它不會。 我一直在閱讀它只會觸發一次並且從側面菜單觸發時會出現問題https://fantashit.com/ionic-4-ionviewwillenter-only-triggers-once/但我不確定這是問題我有，因為它沒有提到在瀏覽器中工作，但在 iOS 中沒有。

我想要的只是在適用於所有平台的不同頁面上設置不同的背景圖像。 肯定有更好的方法嗎？ 任何幫助將不勝感激。

Answer 1

在放棄 ionViewWillEnter 功能/錯誤問題后，我想出了一個解決方法。 而不是 using.ion-content {--background...} 我在 html 中創建了一個包裝器

<ion-content>
  <div class = "splash"></div>

並設置 css 如下：

.splash {
background: url(/assets/imgs/bg/piano.jpg) no-repeat center/ cover fixed;
width: 100%;
height: 100%;

然后將實際內容向上移動 100% 到 go 的背景：

ion-grid{
    margin-top: -100vh;
    height: 100%;
    width:100%;
}

這為我解決了這個問題。

Answer 2

只是為了對其他人更簡潔。 這是一個為 Web 和沒有 flash 的移動視圖提供不同圖像的工作解決方案。

 import { DomController } from "@ionic/angular";

...

 constructor(private domCtrl: DomController
  ) {}

...

 private initializeBackgroundWeb(): void {
try {
  console.log("initializing background");
  const content = document.querySelector(".background");
  const innerScroll = content.shadowRoot.querySelector(".inner-scroll");
  this.domCtrl.write(() => {
    innerScroll.setAttribute(
      "style",
      'background: url("../../assets/images/back7.jpg") center center / cover no-repeat'
    );
  });

  console.log("background initialized");
} catch (e) {}
console.log("background not initialized");
  }


 private initializeBackgroundMobile(): void {
try {
  console.log("initializing background");
  const content = document.querySelector(".background");
  const innerScroll = content.shadowRoot.querySelector(".inner-scroll");
  this.domCtrl.write(() => {
    innerScroll.setAttribute(
      "style",
      'background: url("../../assets/images/back18.jpg") center center / cover no-repeat'
    );
  });

  console.log("background initialized");
} catch (e) {}
console.log("background not initialized");

}

並像這樣檢查 ionViewWillEnter 中的媒體查詢。

 ionViewWillEnter() {
   const x = window.matchMedia("(min-width: 850px)");
   if (x.matches) {
    // If media query matches
   this.initializeBackgroundWeb();
  } else {
  this.initializeBackgroundMobile();
  }
  }

然后，您還可以在 ion-content 內部創建一個 div 並像上面的答案一樣設置高度和寬度。

 .splash {
  height: 100%;
  width: 100%;
  }