(1)创建
先创建组件:
ionic g component custom-toast
打开custom-toast.html
<div class="custom-toast" *ngIf="active">
<div>
{{ message }}
</div>
</div>
打开ts文件,添加两句:
active: boolean = true;
message: string = '自定义Toast';
然后写点样式:
.custom-toast {
position: absolute;
top: 0px;
width: 100%;
height: 56px;
color: #fff;
background-color: black;
border-radius: 10px 10px;
z-index: 100;
opacity: 0.9;
line-height: 56px;
text-align: center
}
然后把它放到哪里呢?
打开app.html:
image.png
刷新浏览器,如无意外,Toast将是这样的:
无论去到哪个页面,它都会显示,因为它是放在了app.html中的。
(2)显示与隐藏
接下来,就是控制它如何显示与隐藏了
我们可以在任何一个页面获取到它,然后直接在这个页面显示或隐藏它,但这就意味着无封装性可言了。
在组件的ts文件中:
先隐藏Toast:
active: boolean = false;
定义显示的函数:
show(message, duration) {
this.message = message;
this.active = true;
setTimeout(() => {
this.active = false;
}, duration);
}
如何在其他页面让Toast组件自己调用的这个方法呢?
component中的方法不能随时随地调用,在页面中ViewChild获取不到;id不靠谱;new出来可以调用,但却没反应。
发布订阅事件也许可以,这里用provider来实现。
先创建一个provider:
ionic g provider custom-toast
然后我们在provider中定义一个函数:
show(message, duration) {
}
回到Toast组件的ts文件,写入:
import { CustomToastProvider } from './../../providers/custom-toast/custom-toast';
...
constructor(private customToast: CustomToastProvider) {
this.customToast.show = this.show.bind(this);
}
这样provider中的show方法就绑定了组件中的show,provider随处可用,那意味着组件中的show也将随处可用!
(3)使用:
在任意一个页面中导入
import { CustomToastProvider } from './../../providers/custom-toast/custom-toast';
...
constructor(private customToast: CustomToastProvider) { }
testToast() {
this.customToast.show('自定义Toast', 2000);
}
页面模板中触发:
<button ion-button (click)="testToast()">Show Toast</button>
(4)动画:
在组件的.scss中写入:
// 先把.custom-toast中的top改为:
top: -60px;
// 定义样式的时候要小心:hide,show是内置样式!hide,show是内置样式!hide,show是内置样式!
.my-show {
animation: my-toast-show .2s ease-in-out forwards;
}
.my-hide {
animation: my-toast-hide .2s ease-in-out forwards;
}
@keyframes my-toast-show {
from { top: -60px; }
to { top: 0 }
}
@keyframes my-toast-hide {
from { top: 0 }
to { top: -60px; }
}
// 样式大致的就是触发show方法后:
// toast向上滑出,duration时间后,向上滑走。
// ng动画也可以实现,但那个更麻烦
绑定到模板,最终的模板:
<div class="custom-toast" *ngIf="active" [class.my-show]="active" [class.my-hide]="myHide">
<div>
{{ message }}
</div>
</div>
修改组件ts文件:
// 定义隐藏动画的变量
myHide = false;
...
show(message, duration) {
this.message = message;
this.active = true;
setTimeout(() => {
this.myHide = true;
setTimeout(() => {
this.myHide = false;
this.active = false;
}, 200) // 隐藏动画完后再移除
}, duration);
}
最后,效果上就是与一般toast一样。
但我们现在可以在这个基础上修改模板,动画,扩展了!
网友评论