ionic4-抽取公共方法Loading

这里写自定义目录标题

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

显示页面:
在这里插入图片描述

发布了180 篇原创文章 · 获赞 92 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐

分享到微信朋友圈

×

扫一扫,手机浏览