ionic4-抽取公共方法Loading

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csxypr/article/details/85950726

ionic4

  最近小咸儿一直在学习ionic4，因为项目的需要所以将Loading与Toast抽取成公共方法，以方便各个页面的调用。接下来看看具体的baseui.ts文件该如何创建：

common

  首先需要在src文件夹下创建一个common文件，小咸儿在里面创建了一个baseui.ts的文件，ionic4中的Loading方法和ionic3发生了一些些变化，详细可见如下：

baseui.ts文件：

import { LoadingController, ToastController } from '@ionic/angular';

export abstract class BaseUI {
    constructor() {

    }

    /**
     * loading加载页面
     * @param {LoadingController} loadingCtrl
     * @param {string} message
     * @returns {Loading}
     * @memberof BaseUI
     */
    protected async showLoading(loadingCtrl: LoadingController,
            message: string) {
            const loader = await loadingCtrl.create({
                message: message
            });
            await loader.present();
            return loader;
         }

    /**
     * Toast全局提示
     * @param {ToastController} toastCtrl
     * @param {string} message
     * @returns {toast}
     * @memberof BaseUI
     */
    protected async showToast(toastCtrl: ToastController, message: string) {
        const toast = await toastCtrl.create({
            message: message,
            duration: 2000,  // 默认展示的时长
            position: 'top'
        });
        await toast.present();
        return toast;
    }
}

引用页面：

import { ModalController, LoadingController } from '@ionic/angular';
import { BaseUI } from '../../common/baseui';

  接下来就可以直接使用baseui中定义好的方法了。

super.showloading(this.loadingCtrl, '请稍等……');

// 解除loading的状态
this.loadingCtrl.dismiss();

  除此之外，还有以下其他的属性以及方法可以调用，具体参考ionic4官网：ionic4-loading
  接下来就是另一个方法的演示了，这个也是非常常用的方法，那就是全局提示。
具体使用也十分简单，直接在所需页面进行调用即可：

if (userCode === '' || password === '') {
      super.showToast(this.toastCtrl, '账号或者密码不能为空哦~');
      return;
}

显示页面：