乐趣区

ionic3 toastController使用封装

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. 效果
成功提示消息:

失败提示:

退出移动版