0

我想使用 cssClass 更改离子加载样式，我的代码如下：

loading.page.ts ：

@Component({
    selector: 'app-loading',
    templateUrl: './loading.page.html',
    styleUrls: ['./loading.page.scss'],
})
export class LoadingPage {

constructor(public lLoadingController: LoadingController) { }

async  presentCunstomLoading() {
    const loading = await this.lLoadingController.create({
        spinner: 'hide',
        duration: 500000,
        content: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class'
    });
    return await loading.present();
}
}

加载.page.scss ::

`

app-loading {
  .custom-class {
    background: #e0b500;
  }

}`

加载.page.html ：

<ion-content padding>
    <ion-button (click)="presentModal()">open modal</ion-button>
</ion-content>

这有什么问题？任何人都可以帮助我。我很困惑。提前谢谢。

4

3 回答 3

2

主题/变量.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: transparent;
    box-shadow: none;
  }
}

我不知道为什么，但它适用于 Ionic4。

如果你在loading.page.scss中写，是不行的。

于 2019-07-22T08:58:19.200 回答
0

我正在使用 IONIC 4。

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null,
  message: '<ion-img src="assets/gif/loading.gif"></ion-img>',
  cssClass: 'custom-loading'
});
await this.myLoading.present();

在主题/变量.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: transparent !important;
    box-shadow: none !important;
  }
}

你去吧。现在你有一个透明背景的自定义加载。

于 2019-11-23T01:08:43.467 回答
0

Rano Paimin，你的解决方案不起作用，所以我会改进你的答案：

我正在使用 IONIC 4

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null, -> here you can add others spinners ou set null 
  remove this attribute -> message: '<ion-img src="assets/gif/loading.gif"></ion-img>', 
  cssClass: 'custom-loading'
});
await this.myLoading.present();

在主题/变量.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: #ffffff url("assets/gif/loading.gif") no-repeat center;
  }
}

如果要更改尺寸，可以更改以下属性：

  background-size: 100px 100px; /* to change dimension of background */
  padding-top: 36px; /* padding top of white square */
  padding-bottom: 36px; /* padding bottom of white square */
  border-radius: 0.8rem; /* border-radius white square */

我希望这对你有帮助。

于 2019-12-05T19:16:55.687 回答