如何自定义单页加载样式 CSS GIF 样式?

Question

presentLoading(message) {
this.loading = this.loadingCtrl.create({
dismissOnPageChange: false,
spinner:'hide',
content:`<img class="load" src="assets/dual.gif" />`,
});
this.loading.present();

}

我是离子框架的伙伴。我在这里展示了我的代码，所以我只需要为单个页面自定义 img。 我只能做常见的页面样式。建议是值得赞赏的。做

ion-loading{
.loading-wrapper{
padding:0px 15px !important;
}
}

Answer 1

您可以为每个组件显示自定义加载程序和自定义样式。 例如：

页面 A

presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-a',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-a.gif" />`,
});
loading.present();
}
.page-a {
// STYLE THAT YOU NEED
}

页B

presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-b',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-b.gif" />`,
});
loading.present();
}
.page-b {
// STYLE THAT YOU NEED
}

另外，如果您想要一个通用的加载器，请创建一个加载器服务，例如

import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
@Injectable()
export class LoaderService {
public loading: any;
constructor(publicloadingCtrl: LoadingController) { }
async show(loaderClass, image) {
if (!this.loading) {
this.loading = await this.loadingCtrl.create({
cssClass: loaderClass,
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="'+image+'" />`
});
this.loading.present();
}
}
async hide() {
if (this.loading) {
await this.loading.dismiss();
this.loading = null;
}
}
}

然后在页面中导入加载程序服务

import { LoaderService } from './../loader/loader.service';
constructor(private loader: LoaderService) {
}
async doSubmit() {
await this.loader.show('LOADER_CLASSNAME', 'YOUR_LOADER_IMAGE');
...stuff here
this.loader.hide();
}

在上面的情况下，您可以显示自定义类和图像，只需将它们作为参数传递即可。