美文网首页
ionic中的ToastController小弹窗用法

ionic中的ToastController小弹窗用法

作者: 紫陌兰溪 | 来源:发表于2018-01-10 14:12 被阅读0次

    ToastController

    1.Toast 是现代应用中常用的微妙通知。 它可用于提供有关操作的反馈或显示系统消息。 应用程式的内容会显示Toast ,应用程式可以将其关闭,以恢复使用者与应用程式的互动。

    Creating-创建

    所有的toast选项都应该在create方法的第一个参数中传递:create(opts)。 要显示的消息应在消息属性中传递。 showCloseButton选项可以设置为true,以便在toast(提示框)上显示一个关闭按钮。 有关所有可用选项,请参阅下面的create方法。

    Positioning-定位

    toast可以定位在视图端口的顶部,底部或中间top, bottom and middle。 该位置可以传递给Toast.create(opts)方法。 position选项是一个字符串,接受的值是顶部,底部和中间。 如果未指定位置,则会在视图端口的底部显示toast。

    Dismissing驳回销毁

    在特定时间之后,toast可以通过传送毫秒数来在toast选项的持续时间内自动关闭。 如果showCloseButton设置为true,那么关闭按钮将关闭toast。 要在创建后关闭toast,请在Toast实例上调用dismiss()方法。 可以调用onDidDismiss函数来在Toast被关闭之后执行一个操作。

    Usage-用法

    import { ToastController } from 'ionic-angular';
    
    constructor(private toastCtrl: ToastController) {
    
    }
    
    presentToast() {
      let toast = this.toastCtrl.create({
        message: '某个特定的时间弹出,比如密码错误的时候弹出',
        duration: 3000,//3秒后自动消失
        position: 'top'//位置
        showCloseButton:true,
        closeButtonText:"关闭"
    });
     toast.onDidDismiss(() => { 
    console.log('toast被关闭之后执行'); 
    }); 
    toast.present();//符合触发条件后立即执行显示。一定不能忘了这个
     }
    
    效果:
    注意:当快速点击,或者操作过快湖出现这个问题,原因是触发弹框后,弹框的hide()方法还没有触发,触发的弹框的事件已经关闭就会造成弹框的hide()方法无法触发
    解决方法是:加个关闭按钮,出现这种情况的时候手动关闭

    在使用的时候一个页面往往需要多个toast,这个时候可以将创建toast的方法封装,然后去调用就好了
    例如:
    封装:

    private popToastView(message: string, duration: number) {
      this.toastController.create({
        message: message,
        position: 'middle',
        duration: duration,
        showCloseButton:true,
        closeButtonText:"关闭"
      }).present();
    }
    
    this.popToastView("手机号不能为空",2000);
    

    Instance Members-实例成员

    Create a new toast component. See options below

    Param Type Details
    opts ToastOptions

    Toast options. See the below table for available options.

    |

    属性 类型 默认值 说明
    message string - toast的信息。 长串将包裹,toast容器将展开。
    duration number - 在隐藏toast之前等待几秒。默认情况下,将会在dismiss()方法被调用的时候关闭
    position string "bottom" toast 在屏幕上的位置接受三个参数值 values: "top", "middle", "bottom".
    cssClass string - 自定义样式类
    showCloseButton boolean false 是否需要一个button 去关闭 toast.
    closeButtonText string "Close" 关闭按钮上显示的文字
    dismissOnPageChange boolean false 是否在导航到新页面时销毁toast

    相关文章

      网友评论

          本文标题:ionic中的ToastController小弹窗用法

          本文链接:https://www.haomeiwen.com/subject/abnnnxtx.html