如何摆脱离子页面之间的白色背景

Question

我正在使用 Ionic 开发一个应用程序，一切都在浏览器上运行顺利，但是当我在 Android 设备（特别是 Android 5 设备）上测试我的应用程序时，页面之间出现白色背景。

应用程序正确加载，我得到启动画面（我制作的自定义图像），然后我得到主页。现在，当我单击一个按钮让我进入另一个页面（即：画廊）时，我会在 4-5 秒内获得白色背景，然后页面加载。我的应用程序中的每个页面都会发生这种情况，来回切换。

我尝试了很多东西，运行ionic cordova run android --prod --release 似乎将这 4-5 秒更改为只有 1-2 秒，但它们仍然存在。另外，它是一个简单的应用程序，我新建了一个空白的应用程序，添加了 3-4 页，每页上只有一个背景图片，以便我可以将其与白色背景区分开来。

我怎样才能摆脱那个白色背景？

这是我的 app-routing.module.ts 以防万一：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'impresa',
    loadChildren: () => import('./impresa/impresa.module').then( m => m.ImpresaPageModule)
  },
  {
    path: 'farmacias',
    loadChildren: () => import('./farmacias/farmacias.module').then( m => m.FarmaciasPageModule)
  },
  {
    path: 'telefonos',
    loadChildren: () => import('./telefonos/telefonos.module').then( m => m.TelefonosPageModule)
  },
  {
    path: 'profesionales',
    loadChildren: () => import('./profesionales/profesionales.module').then( m => m.ProfesionalesPageModule)
  },
  {
    path: 'image-modal',
    loadChildren: () => import('./image-modal/image-modal.module').then( m => m.ImageModalPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果您需要查看任何其他文件，请直接询问我，提前致谢。

Answer 1

在您的全局 .scss（如果您使用其他样式系统，则为等效文件）中，添加规则：

--ion-background-color:#<whatever you want>

如果您想在每个页面的样式中更具体地定位它，请使用：

ion-content {
    --ion-background-color:#<whatever you want>
}

您可以更高级并使用图像。

ion-content{
--background: #000 url('path-to-image') no-repeat 
center center / cover;
}