资讯专栏INFORMATION COLUMN

ionic3 toastController使用封装

blankyao / 3054人阅读

摘要:说明是官方提供的消息提示框组件,用于给用户操作后结果反馈和提示。官网地址如下是默认的样式,项目中使用则需要去改变很多样式则需要讲解一些入参。效果成功提示消息失败提示

1. 说明

toastController是ionic官方提供的消息提示框组件,用于给用户操作后结果反馈和提示。
官网地址:https://ionicframework.com/do...
如下是默认的样式,项目中使用则需要去改变很多样式则需要讲解一些入参。

2. 使用

控制台运行命令,创建服务

ionic g provicer ToastService

编写程序

import { Injectable } from "@angular/core";
/**
导入ionic消息提示框模块ToastController
*/
import { ToastController } from "ionic-angular";

/*
  Generated class for the ToastServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ToastServiceProvider {

//自己定义的三种消息框样式
  errorCss="errorToast"
  generalCss="generalToast"
  successCss="successToast"

/**
构造函数引入
*/
  constructor(public toast:ToastController) {
    console.log("Hello ToastServiceProvider Provider");
  }

  /**
   * 错误信息提示框
   * @param message 消息
   */
  errorToast(message:any){
    this.presentToast(message,this.errorCss);
  }

  /**
   * 普通信息提示框
   * @param message 消息
   */
  generalToast(message:any){
    this.presentToast(message,this.generalCss);
  }

  /**
   * 成功信息提示框
   * @param message
   */
  successToast(message:any){
    this.presentToast(message,this.successCss);
  }

  /**
   *
   * @param message需要展示的信息
   * @param css 自定义的背景颜色
   */
  presentToast(message:any,css:string) {
    let toast = this.toast.create({
      message: message,//提示消息内容
      duration: 3000,//显示时长,单位毫秒
      position: "bottom",//消息框出现的位置,bottom就是底端的意思,自然就有top和中间了
      showCloseButton:true,//是否有关闭按钮,true就是有
      cssClass:css,//自己给消息框定义的样式,css样式名称
      closeButtonText:"关闭"//关闭按钮上的文字
    });

    toast.onDidDismiss(() => {
      console.log("Dismissed toast");
    });

    toast.present();//出发消息提示框
  }

}

对应的css文件

.errorToast{
  //.toast-message{
  //  color: #a94442;
  //}
  .toast-wrapper {
    //background: #eba6ac;
    background: #f53d3d;
  }
}
.generalToast{
  .toast-wrapper {
    background: #488aff;
  }
}
.successToast{
  .toast-wrapper {
    background: #32db64;
  }
}
3. 导入

app.module.ts中声明服务,那个页面需要使用,引用即可。

4.效果

成功提示消息:

失败提示:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58775.html

相关文章

  • ionic3 toastController使用封装

    摘要:说明是官方提供的消息提示框组件,用于给用户操作后结果反馈和提示。官网地址如下是默认的样式,项目中使用则需要去改变很多样式则需要讲解一些入参。效果成功提示消息失败提示 1. 说明 toastController是ionic官方提供的消息提示框组件,用于给用户操作后结果反馈和提示。官网地址:https://ionicframework.com/do...如下是默认的样式,项目中使用则需要去...

    tain335 评论0 收藏0
  • LeanCloud + Ionic3 迅速重构应用

    摘要:的数据强制刷新由于的数据绑定与更新策略,有时取回数据时数据并不能引起页面的变更,这时候就需要强制刷新页面绑定的数据了。这次重构差不多就用了四天的时间,写了个个个,按时交活儿希望本文可以在小应用的快速构建上给大家一个参考 作者:李宜栋 ​​【 玩转 LeanCloud 】开发者经验分享: 学校有一个高考志愿填报的应用需要重构,之前的实现是通过构建 Laravel RESTful API ...

    geekidentity 评论0 收藏0
  • 来扯点ionic3[7] LocalStorage的使用—以登录和注销为例

    摘要:我们可以尝试模拟登录的流程来体验这一的使用。制作模板并完成数据绑定在编写表单模板,并使用将每个项目绑定在数据模型上。清除中的用户信息在首页添加注销按钮,清除中的,并跳转回登录页面。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 一般意义上,一个互联网 APP 中的数据主自与服务器的交...

    lushan 评论0 收藏0
  • 来扯点ionic3[2] 页面一线牵 珍惜这段缘

    摘要:在编译过后,实际上只有一个网页,它是一个单页面应用。所以在移动盛行的今天,单页面应用也是一种大势所趋。 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 上一次我们完成了一个新页面的创建可能你被乱七八糟的概念搞得心烦意乱不过你那么聪明又那么好看我相信你肯定花了点时间就把他们搞懂了 我们先...

    tracymac7 评论0 收藏0
  • 使用Ionic3框架开始第一个混合开发APP

    摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发...

    wangshijun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<