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

Question

我正在使用 Ionic 开发应用程序，并且在浏览器上一切正常，但是当我在 Android 设备（特别是 Android 5 设备）上测试我的应用程序时，我得到了一个白色页面之间的背景。

应用程序正确加载，我看到启动画面（我制作的自定义图像），然后我看到主页。现在，当我单击一个按钮将我带到另一个页面（即：画廊）时，我会得到一个白色背景，持续 4-5 秒，然后页面加载。它发生在我的应用程序的每个页面上，来回移动。

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

我怎样才能去掉那个白色背景？

这是我的应用程序-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;
}

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

How to get rid of white background between pages in ionic

android

cordova

typescript

ionic-framework

angular