Как настроить стиль загрузки одной страницы css GIF? - PullRequest
0 голосов
/ 12 февраля 2020
 presentLoading(message) {

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

}

Я дружу с ioni c framework. Я показал свой код здесь, поэтому мне нужно настроить IMG только для одной страницы. я могу сделать только общий стиль страницы. Консультации приветствуются. сделано

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

1 Ответ

0 голосов
/ 12 февраля 2020

Вы можете показать пользовательский загрузчик и собственный стиль для каждого компонента. например:

pageA

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
}

pageB

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();
}

. В приведенном выше случае вы можете показать пользовательский класс и изображение, просто передав их в качестве аргумента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...