Question

Ionic4项目中我们可以使用Ionic4进度指示组件ion-loading对项目进行布局。

ion-loading官方文档地址:https://ionicframework.com/docs/api/loading

An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.

Creating

Loading indicators can be created using a Loading Controller. They can be customized by passing loading options in the loading controller's create method. The spinner name should be passed in the spinner property. If a value is not passed to spinner the loading indicator will use the spinner specified by the platform.

Dismissing

The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the duration of the loading options. To dismiss the loading indicator after creation, call the dismiss() method on the loading instance. The onDidDismiss function can be called to perform an action after the loading indicator is dismissed.

ion-loading　用法(Usage)

angularjavascriptreactvue

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'loading-example',
  templateUrl: 'loading-example.html',
  styleUrls: ['./loading-example.css']
})
export class LoadingExample {
  constructor(public loadingController: LoadingController) {}

  async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Hellooo',
      duration: 2000
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();

    console.log('Loading dismissed!');
  }

  async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({
      spinner: null,
      duration: 5000,
      message: 'Please wait...',
      translucent: true,
      cssClass: 'custom-class custom-loading'
    });
    return await loading.present();
  }
}

async function presentLoading() {
  const loadingController = document.querySelector('ion-loading-controller');
  await loadingController.componentOnReady();

  const loading = await loadingController.create({
    message: 'Hellooo',
    duration: 2000
  });

  await loading.present();

  const { role, data } = await loading.onDidDismiss();

  console.log('Loading dismissed!');
}

async function presentLoadingWithOptions() {
  const loadingController = document.querySelector('ion-loading-controller');
  await loadingController.componentOnReady();

  const loading = await loadingController.create({
    spinner: null,
    duration: 5000,
    message: 'Please wait...',
    translucent: true,
    cssClass: 'custom-class custom-loading'
  });
  return await loading.present();
}

import React, { Component } from 'react'
import { IonLoading } from '@ionic/react';

type Props = {}
type State = {
  showLoading1: boolean
  showLoading2: boolean
}

export class LoadingExample extends Component {

  constructor(props: Props) {
    super(props);
    this.state = {
      showLoading1: false
      showLoading2: false
    };
  }

  render() {
    return (
       this.setState(() => ({ showLoading1: false }))}
        message={'Hellooo'}
        duration={200}
      >
      

       this.setState(() => ({ showLoading2: false }))}
        spinner={null}
        duration={5000}
        message='Please wait...'}
        translucent={true}
        cssClass='custom-class custom-loading'
      >
      
    );
  }
}

  
    Show Loading
    

    Show Loading
  



export default {
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    presentLoading() {
      return this.$ionic.loadingController
        .create({
          message: 'Loading',
          duration: this.timeout,
        })
        .then(l => {
          setTimeout(function() {
            l.dismiss()
          }, this.timeout)
          return l.present()
        })
    },
    presentLoadingWithOptions() {
      return this.$ionic.loadingController
        .create({
          spinner: null,
          duration: this.timeout,
          message: 'Please wait...',
          translucent: true,
          cssClass: 'custom-class custom-loading',
        })
        .then(l => {
          setTimeout(function() {
            l.dismiss()
          }, this.timeout)
          return l.present()
        })
    },
  },
}
</script>

ion-loading　属性(Properties)

animated
Description	If true, the loading indicator will animate.
Attribute	animated
Type	boolean
Default	true
backdropDismiss
Description	If true, the loading indicator will be dismissed when the backdrop is clicked.
Attribute	backdrop-dismiss
Type	boolean
Default	false
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
duration
Description	Number of milliseconds to wait before dismissing the loading indicator.
Attribute	duration
Type	number
Default	0
enterAnimation
Description	Animation to use when the loading indicator is presented.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
keyboardClose
Description	If true, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	keyboard-close
Type	boolean
Default	true
leaveAnimation
Description	Animation to use when the loading indicator is dismissed.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
message
Description	Optional text content to display in the loading indicator.
Attribute	message
Type	string | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
showBackdrop
Description	If true, a backdrop will be displayed behind the loading indicator.
Attribute	show-backdrop
Type	boolean
Default	true
spinner
Description	The name of the spinner to display.
Attribute	spinner
Type	"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined
translucent
Description	If true, the loading indicator will be translucent.
Attribute	translucent
Type	boolean
Default	false

ion-loading　事件(Events)

Name	Description
ionLoadingDidDismiss	Emitted after the loading has dismissed.
ionLoadingDidPresent	Emitted after the loading has presented.
ionLoadingWillDismiss	Emitted before the loading has dismissed.
ionLoadingWillPresent	Emitted before the loading has presented.

ion-loading　内置方法(Methods)

dismiss
Description	Dismiss the loading overlay after it has been presented.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Description	Returns a promise that resolves when the loading did dismiss.
Signature	onDidDismiss() => Promise<OverlayEventDetail<any>>
onWillDismiss
Description	Returns a promise that resolves when the loading will dismiss.
Signature	onWillDismiss() => Promise<OverlayEventDetail<any>>
present
Description	Present the loading overlay after it has been created.
Signature	present() => Promise<void>

ion-loading中的CSS 自定义属性

Name	Description
--background	Background of the loading dialog
--height	Height of the loading dialog
--max-height	Maximum height of the loading dialog
--max-width	Maximum width of the loading dialog
--min-height	Minimum height of the loading dialog
--min-width	Minimum width of the loading dialog
--spinner-color	Color of the loading spinner
--width	Width of the loading dialog